Question

我正在努力尝试更新项目列表的视图几个小时。

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

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

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

我尝试了documents组件的document-list访问者中的那些：

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
}

我还尝试手动更新setter中的列表（放置得很好的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;

ngFor中的Angular 2组件未更新

1 个答案: