Question

我当前的组件有责任按时间顺序执行两项任务：

ngOnInit：循环浏览从服务器查询的数据，并为列表的每个部分插入一个组件。
ngAfterViewInit：订阅@ViewChildren(MyDirective) changes observable，并在更改时动态插入组件。

我得到的错误如下：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

它似乎有意义，因为我正在更改检测挂钩中创建组件。

我当前的代码，简化为一个最小的例子，抛出与我自己相同的错误：

指令

@Directive({selector: '[min-insert]'})
export class MinDirective {
    @Input("min-insert") public minData;
    constructor(public viewContainerRef: ViewContainerRef) { }
}

组件（这里的重要部分不是确切的代码，而是在订阅更改时创建组件。）

...
someData : any;
@ViewChildren(MinDirective)d:QueryList<MinDirective>;
ngOnInit(){
    this.service.doHTTPStuff(...); //Assigns real data to "someData"
}
ngAfterViewInit(){
    this.d.changes.subscribe(()=> {this.d.forEach(dir=>{
        let cF = this.componentService.getComponentFactory(...);
        dir.viewContainerRef.clear();
 (<IC>dir.viewContainerRef.createComponent(cF).instance).setData(dir.minData);

    })});
}

这是模板，其中有＃34;有趣的＆＃34;这个错误的一部分，我想：

<div *ngFor="let minData of someData">
    <ng-template [min-insert]="minData"></ng-template>
</div>

基本上，应该发生的第一件事是someData被循环通过，并且对于其中的每个minData，我的指令的空壳被创建。一旦我成功地使用@ViewChildren获取指令，我想＆＃34;替换＆＃34;他们通过在他们身上创建一个组件。

如果我删除了for-loop并且只创建了一个＃34;空shell＆＃34;以一种我不需要订阅@ViewChildren的方式，一切都很完美。但是，两者的组合会输出上述错误。

有什么想法吗？谢谢！

在变更检测钩子中创建组件

0 个答案: