更改检测未注册数据更改

Question

我有一个 html 结构，组件内部有一个组件（忘了正确的词）。

基本像这样工作（大大简化）：

主要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>

在 app-item 中，我显示了列表中的几个项目。该列表通过 http.get 请求直接从数据库中获取数据。

现在我也有添加或删除项目的功能（项目分别添加到数据库或从数据库中删除都很好）。尽管更改检测没有发现任何变化，并且需要刷新站点（例如通过 F5）以显示更改。

我检查了代码（并非所有代码都来自我），但找不到任何指定的变更检测策略。

我还尝试通过 ChangeDetectorRef (this.ref.detectChanges();) 从添加和删除函数手动触发更改检测。尽管这也没有消除手动刷新页面以查看更改的需要。

现在我缺少什么来进行变化检测来拾取这个？或者，如何在我的 add/delete 方法中手动触发它？

Answer 1

由于您是在现有数组中添加或删除元素 angular 无法选取更改。

要实现这一点，您可以这样做

要手动触发更改检测，您可以按照答案

在您的组件中注入 ChangeDetectorRef，然后使用该对象的 detectChanges() 方法手动触发更改检测。

constructure(private cd: ChangeDetectorRef) {}

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

Answer 2

如果您使用传播运算符而不是推送，它应该可以工作。

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

原因是 angular 在整个对象发生变化或引用发生变化时检测到变化，因此突变不会触发它。因此，与其改变数组，不如将其变成一个新数组。

Change detection not registering data changes