ngFor在删除项目时不更新

问题描述

我在页面模板 (Ionic 2) 中使用 *ngFor.

I'm using *ngFor inside a page template (Ionic 2).

<div class="child" *ngFor="let child of sharedParams.children">
        ...
</div>

在应用程序内部的某个地方，当检测到更改(添加、更新、删除)时，我会更新子数组.我这样做是为属性分配一个新数组:

Somewhere inside the app, I update the children array when changes are detected (add, update, remove). I do this be assigning a new array to the property:

export class SharedParams {
    private _children: Child[];

    constructor(children: Child[]){
        this._children = children;
    }

    get children(){
        return this._children;
    }

    set children(children: Child[]){
        this._children = children;
    }
}

当在数组中添加或更新项目时，会触发 ngFor 并更新 DOM.但是，当一个项目被删除时，数组会发生变化，但 DOM 不会删除该项目的条目.

When an item is added or updated inside the array, the ngFor is triggered and the DOM is updated. However, when an item is removed, the array is changed, but the DOM does not remove the entry for that item.

我还尝试使用push"和splice"手动修改数组而不是替换它.但这种行为仍然是名字.移除项目时，DOM 永远不会更新.

I've also tried to manually modify the array instead of replacing it, using 'push' and 'splice'. But the behaviour stays the name. The DOM is never updated when an item is removed.

任何帮助将不胜感激.

推荐答案

你可以使用 ChangeDetectorRef 每 0.5 秒或更长时间检查和更新列表...

You can use ChangeDetectorRef to check and update the list every 0.5 seconds or more...

例如:

constructor(private ref: ChangeDetectorRef) {
    console.log('Hello PhotoComponent Component');
    setInterval(() => {
      this.ref.detectChanges();
    }, 500);
  }

这篇关于ngFor在删除项目时不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！