假设我在变量“elements”上运行ngfor,以呈现子组件-
parent.html->
<div *ngFor="let elem of elements">
<child-component [data]="elem"></child-component>
</div>
parent.ts->现在父文件有一个输入设置器,我在其中设置“elements”
@Input("parent-data") public set parentData(value){
if(value){
if(elements){
this.elements = undefined;
this.elements = cloneDeep(value);
}else{
this.elements = value;
}
}
}
在这里,当我第一次从父组件开始时,“this.elements”是未定义的,但当我下次调用“parent data”输入setter时,则定义了“this.elements”。
因此,我正在取消定义'this.elements',然后分配新值。
我希望使用*ngfor的div来呈现子组件的新示例,但它只覆盖以前的现有子组件。因此,出于这个原因,我这样做了
....
this.elements = undefined;
....
第一。但它仍然只覆盖ngfor中子组件的旧示例。我想要的是ngfor读取未定义的,然后取消所有子组件,然后读取'this.elements'的新值,并呈现子组件的新示例。现在,在可观察计时器的帮助下,这种行为是可能的,如下所示
@Input("parent-data") public set parentData(value){
if(value){
if(elements){
this.elements = undefined;
timer(10).pipe().subscribe(result => {
this.elements = cloneDeep(value);
});
}else{
this.elements = value;
}
}
}
在这里,它取消对“this.elements”的定义,在没有子comp的情况下渲染div,然后在10ms后,它使用分配给“elements”的新值渲染子comp。这意味着,在这里,我们可以在元素未定义的情况下运行*ngfor 10毫秒,并删除子组件的旧示例。但是,我希望在没有计时器的情况下有类似的行为。请帮我找一个非计时器解决方案。
暂无答案!
目前还没有任何答案,快来回答吧!