更改检测未注册数据更改

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();）从添加和删除功能手动触发更改检测。 虽然这也没有消除手动刷新页面以查看更改的需要。

现在我发现变量检测缺少什么来接这个？或者，我如何在添加/删除方法中手动触发它？

Answer 1

由于您在现有数组中添加或删除元素，因此无法选择更改。

为此，你可以这样做

• 使用与items= items.slice();
相同的数组元素的新对象分配数组引用
• 或者您可以将Object.assign方法用作items= Object.assign([],items);
• 在对阵列进行更改后，这两件事都应该完成。

要手动触发更改检测，您可以按照回答on this link： -

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

constructure(private cd: ChangeDetectorRef()){}
someMethod(){
    cd.detectChanges();
}

Answer 2

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

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

这样做的原因是，当整个对象发生变化或参考发生变化时，角度会检测到变化，因此，突变不会触发它。因此，您需要使它成为一个新的数组，而不是变异该数组。

Answer 3

添加ChangeDetectionStrategy这可能会解决您的问题，但在genral中它应该被选中Angular可能是其他错误的代码

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MovieComponent {
  // ...
}