代码之家 › 专栏 › 技术社区 › m41n

更改检测未记录数据更改

angular-http angular

20

m41n · 技术社区 · 9 年前

主html:

<div *ngFor="let item of data">
  <app-item [item]="item"></app-item>
</div>

<button (click)="addItem()">Add</button>

项目html:

<div>{{item.name}}</div>

<button (click)="deleteItem()">Delete</button>

在应用程序项目中,我显示了列表中的几个项目。列表通过http直接从数据库中获取数据。获取请求。

现在,我还可以添加或删除两个都有效的项目(项目可以分别添加到数据库或从数据库中删除)。虽然更改检测不会拾取任何更改,但需要刷新站点(例如通过F5)以显示更改。

我检查了代码(并非所有代码都来自我),但找不到任何指定的更改检测策略。

我还尝试通过ChangeDetectorRef从添加和删除功能手动跳跳虎更改检测( this.ref.detectChanges(); 虽然这也没有消除手动刷新页面以查看更改的需要。

现在,我错过了什么变化检测来提取这个?或者,我如何在添加/删除方法中手动触发它?

2 回复 | 直到 9 年前

1

25

Kamil Prathmesh Dali 6 年前

由于要在现有阵列中添加或删除元素,angular无法拾取更改。

为了让它发挥作用,你可以像

要手动检测火灾变化,您可以按照答案进行操作 on this link

ChangeDetectorRef detectChanges() 手动检测火灾变化的方法。

constructure(private cd: ChangeDetectorRef) {}

someMethod() {
    this.cd.detectChanges();
}

2

11

cpi 7 年前

如果使用扩展运算符而不是推送,它应该可以工作。

this.data = [...this.data, newItem];

这是因为angular在整个对象更改或参考更改时检测到更改,因此变异不会触发它。因此,您需要使其成为一个新的数组,而不是对数组进行变异。