ngFor内部的Angular 2组件未更新

Question

我正在努力几个小时，以尝试更新我的商品列表的视图。

我有一个称为document-list的组件。 该组件遍历传递给它的每个文档，并包括一个称为document-list-item的组件。

<div *ngFor="let document of documents">
    <document-list-item [document]="document"></document-list-item>
</div>

当我更新文档列表时，子视图不会更新。

我在document-list组件的documents访问器中尝试过这些：

public set documents(value: DocumentDetails[]) {
    this._documents = value;
    // used one by one
    this.changeDetector.detectChanges(); => doesn't work
    this.changeDetector.markForCheck(); => doesn't work
    this.appRef.tick(); => throw an error about recursivity
}

我还尝试了手动更新设置器中的列表（放置良好的console.log向我显示了它的加入）：

private _documents: DocumentDetails[] = [];
@Input()
public set documents(value: DocumentDetails[]) {
    this._documents = [];
    for (let i = 0; i < value.length; i++) {
        this._documents[i] = value[i];
    }
}
public get documents() {
    return this._documents;
}

唯一有效的方法是在访问器中执行此操作：

public set documents(value: DocumentDetails[]) {
    this.documents = [];
    setTimeout(() => {
        this._documents = value;
    }, 0);
}

它可以工作，但是每次文档数组更新时，都会显示一个闪烁的列表，这是不可接受的。

欢迎任何帮助

Answer 1

你有：

<document-list-item [document]="document"></document-list-item>

因此，您应该在孩子班级上：

@Input()
document: any;