Angular - Интерполяция не показывает текущие элементы списка

Question

У меня очень маленькое приложение, в котором есть две кнопки. Одна кнопка добавляет 1 к списку, другая добавляет -1. Кроме того, я отображаю сумму в списке.

Теперь у меня есть одна проблема. У меня есть интерполяция списка, и вновь добавленные значения не отображаются вообще, а вместо этого только значения по умолчанию, которые инициализируются (см. Контроллер).

Вот мой шаблон:

<p>Items: {{ list }}</p> <!--This is not updating-->
<p>Sum: {{ getSumOfList() }}</p>
<button (click)="addItem(1)">Add 1</button>
<button (click)="addItem(-1)">Add -1</button>

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

export class HomeComponent implements OnInit {
  list: number[] = [1, 2, 3, 4, 5];

  constructor() { }

  ngOnInit(): void {
  }

  getSumOfList() {
    var total = 0;
    for (var i in this.list) { total += this.list[i]; }
    return total;
  }

  addItem(item: number) {
    this.list.push(item);
    console.log(this.list);
  }
}

Как отобразить все элементы списка с синтаксисом интерполяции?

Answer 1

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

this.list = [...this.list, item];

• Вы всегда можете создать новую ссылку на массив, чтобы разрешить запуск механизма OnChanges (обнаружение изменений) Подробнее
• OnChanges Lifecycle Hook сработает только при изменении экземпляра входного свойства, поэтому у вас должна быть новая ссылка для активации обнаружения изменений.

Рабочая демонстрация