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

如果您使用的是onPush更改检测策略，则不确定，如果这样，您的组件将无法在更改数据时检测到任何更改。你可以尝试

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

      }
  );

Answer 3

添加跟踪功能以确保正确计算您的商品：

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

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

角度推送不是推送而是替换列表中的数据

3 个答案: