javascript - ngFor 内的 Angular 2 组件未更新

Question

我花了几个小时的时间试图更新我的项目列表的 View 。

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

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

当我更新文档列表时， subview 不会更新。

我在 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
}

我还尝试手动更新 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);
}

它有效，但每次更新文档数组时都会显示一个闪烁的列表，这是 Not Acceptable 。

欢迎任何帮助

Answer 1

你有:

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

所以你的 child 类(class)应该有:

@Input()
document: any;