Блог

У меня есть угловой компонент ( SummaryComponent ), который вводится с помощью сервиса ( LicenseRequestService ). Переменная ( totalLicense ) компонента определяется как равная вычисляемому полю из службы.

Класс компонента записывается следующим образом :

 import { Component, OnInit } from '@angular/core'; import { LicenseRequestService } from '../shared/license-request.service';  @Component({  selector: 'sg-summary',  templateUrl: './summary.component.html',  styleUrls: ['./summary.component.css'] }) export class SummaryComponent implements OnInit {   constructor(private _service : LicenseRequestService) {   }   public totalLicense= this._service.licenseDetails.length    ngOnInit(): void {    }   updateSummary(){  const licenses= this._service.licenseDetails.length  console.log("total players requested : "   players)  this.totalLicense= players  }  }   

Я встроил totalLicense значение в DOM, как показано ниже :

 lt;divgt;  Total number of licenses is : {{totaLicense}} lt;/divgt;  lt;button type="submit" (click)="updateSummary()"gt;Get licenseslt;/buttongt;  

Каждый раз, когда служба обновляется, я ожидаю, что DOM будет отражать обновленное значение totalLicense , но оно остается равным 0. Однако, когда я нажимаю кнопку с надписью Get licenses , DOM затем обновляется, и totaLicense переменная показывает новое значение в браузере.

Нужно ли мне вносить какие-либо изменения, чтобы убедиться, что значение totalLicense обновляется без нажатия кнопки (которая является желаемой функцией)?

Ваша проблема в том, что вы передаете не ссылку, а значение. В основном, если у вас есть следующее:

 let x = 'test'; let y = x; x = 'update'; console.log(y); 

Этот код выведет «тест», а не «обновление», потому что y все еще указывает на исходное значение

Есть три решения, которые я могу придумать навскидку:

1. Ссылка на саму службу в html (вам придется сделать ее закрытой)
2. Вместо этого добавьте licenseDetails в качестве переменной в свой компонент. Таким образом, когда вы получите доступ к переменной длины, она будет по ссылке, а не по значению
3. Используйте геттер (не рекомендуется, так как это антипаттерн, так как он заставляет функцию запускаться при каждом цикле обнаружения изменений)

Попробуйте ввести этот public totalLicense= this._service.licenseDetails.length код constructor или ngOnInit