Angular 9 Переменная не обновляется в просмотре - PullRequest
Новая
       59

Angular 9 Переменная не обновляется в просмотре

3 голосов
/ 04 августа 2020

У меня есть переменная в моем компоненте, которая обновляется при использовании console.log(variable), хотя она не обновляется в моем представлении с использованием {{ variable }}. Я пробовал несколько вещей, моим последним вариантом было использовать Observers и все еще не работает как должно.

Я объясню свой код:

Итак, у меня есть служба, базовый компонент, компонент приложения и другой компонент

Мой базовый компонент не у меня нет никакого взгляда. Он только создает экземпляры служб. вот так: 

  private _communicationService: CommunicationService;
  private _clientService: ClientService;

  constructor(private injector : Injector) {
    this.clientService = this.injector.get(ClientService);
  }

(Включает методы получения и установки)

Мой компонент приложения и другой, расширяет BaseComponent

Что я думаю, это неправильно моя реализация следующая:

Мой компонент приложения вызывает window функции, которые я пытался реализовать в моем ngInit 

export class AppComponent extends BaseComponent implements OnInit{  
  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    window.FlashExternalInterface.logLoginStep = (step : string) => {
      this.clientService.loadClientProgress(step);
    }
  }
}

Мой «другой» компонент : 

export class LoaderComponent extends BaseComponent implements OnInit {
  public progress = 0;

  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    this.clientService.clientProgress.subscribe(data => {
      console.log("Data Changing?: " + data);
      this.progress = data;
      console.log("Progress changing??" + this.progress);
    });
  }
}

Моя progress переменная изменяется в консоли F12, но не отображается в представлении.

Я пробовал использовать {{ this.progress }} И без this. или даже вызов экземпляра прямого сервиса из базового компонента clientService.clientProgress.getValue()

Я имею в виду оконную функцию, которая выдает мне ошибку в консоли, например: 

ERROR TypeError: Cannot set property 'logLoginStep' of undefined.

Но, тем не менее, переменная изменяется в приставка. Переменные консоли

1 Ответ

0 голосов
/ 04 августа 2020

Вероятно, это асинхронная проблема, поскольку progress присваивается значение в вызове subscribe(). До того, как данные вернутся из клиентской службы, progress не будет обновлен.

Причина, по которой ваш console.log работает, заключается в том, что он находится в вашем блоке subscribe(), поэтому по определению ожидает чтобы служба возвращала значение перед входом в консоль. Ваш HTML, однако, получает указание отобразить текущее значение progress, как только страница загрузится. Даже если ваш subscribe() вызывается в ngOnInit(), службе все равно требуется ненулевое количество времени, чтобы вернуть обновленное значение, а это уже слишком поздно.

Есть несколько способов чтобы справиться с этим в вашем HTML

asyn c pipe

<p>{{ progress | async }}<p>

Это будет следить за переменной progress для обновлений и визуализировать изменения в DOM сразу после обновления значения; фактически то же самое, что .subscribe() делает в вашем файле .ts

* ngIf

<p *ngIf="progress">{{ progress }}</p>

Это не будет отображать <p> вообще до тех пор, пока переменная progress не станет истинной, т.е. в данном случае не 0, null или undefined

...