Angular2 Обновление представления с использованием односторонней привязки данных

Question

Если я правильно понял, одностороннее связывание данных происходит от модели к представлению и достигается с помощью двойных фигурных скобок {{}} или квадратных скобок [].

Я хочу обновить счетчик (значок) внутри кнопки. Обновление не отражается автоматически после смены модели, обновляется после нажатия на кнопку. Все сделано в одном компоненте.

Мой код:

.html:

<button
mat-raised-button
matStepperNext
[matBadge]="polygonCounter"
matBadgePosition="below"
matBadgeColor="accent">
Next
</button>

.ts:

polygonCounter: number; //declared

 ngOnInit() {
...
    this.polygonCounter = 0;
...
  }

Функция, которая изменяет значение:

onMapDrawed(e): void {
    ....
    this.polygonCounter = 0;
    let counter = 0;
    ...//function that get the new counter
    this.polygonCounter = counter; //counter has the new value
}

Это также не обновляется в представлении, например:

<p>{{polygonCounter}}</p>

Я что-то упустил? Спасибо.

Answer 1

Я нашел решение проблемы, когда вносил изменения в обработчик событий Leaflet, вам нужно активировать обнаружение изменений, потому что обратные вызовы Leaflet выполняются за пределами угловой зоны. Поэтому я вставил ссылку на угловую зону и затем в свой обработчик функций:

this.zone.run(() => {
  this.polygonCounter = counter;
});

Как указано здесь: https://github.com/Asymmetrik/ngx-leaflet/issues/118

Answer 2

Похоже, что функция, которая получает новый счетчик, не обнаружена изменением ngZone. Вы можете попробовать это с setTimeout. Это происходит специально, когда участвует третья сторона.

onMapDrawed(e): void {
    ....
    this.polygonCounter = 0;
    let counter = 0;
    ...//function that get the new counter
    setTimeout(()=>this.polygonCounter = counter); //change in setTimeout
}