Угловой толчок не толкает, а заменяет данные в списке

Question

У меня есть некоторые данные, загруженные в мое представление, используя *ngFor.

Когда страница загружается, она добавляет некоторые данные в представление в списке.

В представлении у меня есть это:

В app.component.html

<button (click)="addToList()"></button>


<ul *ngFor="let list of datalist">
  <li>{{ list.title }}</a></li>
</ul>

В app.component.ts

datalist = [];

ngOnInit() {
  // Loads data....
  this.datalist = myLoadedData; // So when the page is loaded some data is loaded into datalist and shown in view

}

addToList() {

  this.datalist.push(
    {
        title: 'Item 2'

      }
  );

}

Моя проблема в том, что когда я нажимаю кнопку, чтобы вставить новые данные в список, они не помещают новые данные в него, а фактически заменяют текущие данные.

Как я могу это исправить?

Answer 1

Я думаю, что проблема не в толкании, а в вашей привязке.

попробуйте это:

addToList() {
this.datalist.push(
{
    title: 'Item 2'

  }
);
  this.datalist=[...this.datalist];
}

и, кстати, кажется, что вы закрываете тег </a>, не открывая его.

Answer 2

Добавьте функцию отслеживания, чтобы гарантировать, что ваши элементы правильно рассчитаны:

*ngFor="let list of datalist; trackBy: customTB"

customTB(index, item) {
  return `${index}-${item.id}`; // Add an ID to your items
}

Answer 3

Не уверен, что если вы используете стратегию обнаружения изменений onPush, в этом случае ваш компонент не обнаружит никаких изменений при изменении данных. Можете ли вы попробовать

this.datalist = this.datalist.concat(
    {
        title: 'Item 2'

      }
  );