Одни и те же данные по-разному отображаются в angular9. почему? - PullRequest
Новая
       54

Одни и те же данные по-разному отображаются в angular9. почему?

4 голосов
/ 08 мая 2020

В следующем примере

  • первое выражение {{ bar }} никогда не обновляется, но
  • второе выражение {{ "" + bar }} обновляется:

например, 

two
1588950994873

Почему это так? 

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    What is different and why?
    <br />
    {{ bar }} <br />
    {{ "" + bar }} <br />
  `
})
export class AppComponent {
  value: string = "default";

  bar: any = d => {
    this.value = d;
  };

  ngOnInit() {
    this.bar.valueOf = () => this.value;
    this.bar("one");
    setInterval(() => this.bar(Date.now() + ""), 1000);
    this.bar("two");
  }
}

Пример Stackblitz

1 Ответ

2 голосов
/ 08 мая 2020

Причина в том, что обнаружение изменений angular работает путем сравнения экземпляра выражения:

  • {{ bar }}: экземпляр bar никогда не изменяется - вы назначаете функцию этому классу член, и вы никогда не переназначаете его - поэтому каждый цикл обнаружения изменений будет видеть, что bar по-прежнему тот же экземпляр и не обновляет его (т. е. поскольку экземпляр тот же, мы даже не запрашиваем значение)
  • {{ "" + bar }}: в каждом цикле обнаружения изменений будет вычисляться выражение "" + bar. Когда эта конкатенация строк оценивается, мы должны получить значение из bar, которое будет обновлено вашим таймером. Таким образом, результатом конкатенации строк всегда будет новый экземпляр строки, и, таким образом, обнаружение изменений обновит представление.
...