ng删除项目时不更新 [英] ngFor not updating when item removed

问题描述

我在页面模板（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.

我还尝试手动修改数组而不是替换它，使用'推'和'拼接'。但这种行为仍然是名字。删除项目时，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.

任何帮助都将不胜感激。

Any help would be greatly appreciated.

推荐答案

您可以使用 ChangeDetectorRef 进行检查，每隔0.5秒或更长时间更新一次列表...
例如

you can use ChangeDetectorRef for check and update the list every 0.5 seconds or more... for Example

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

在这里查看信息
ChangeDetectorRef＃example

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