我有一个条目列表。当我点击这样的条目完成HTTP请求时,将加载数据并将其显示在表格中。到现在为止还挺好。
现在我尝试创建一个导出函数来一次输出所有表。抽象代码如下所示:
this.objectlist.forEach(entry => {
this.getDataFromHTTP(entry).subscribe(response => {
tabledata.push(this.getTableDOM());
})
})
在功能getTableDOM()
我做了类似let table = document.getElementsByClassName(data.classname);
的事情。单击每个条目时代码本身就会运行。但它在forEach()
内不起作用。
真正的问题是getTableDOM()
返回一个空结果,因为DOM在调用时没有准备好。
所以我的问题是:在调用getTableDOM()
之前,我怎么能等到DOM更改完成。或许我实现目标的方法完全错误。但如果是这样的话,我怎么能这样做呢?
谢谢你的帮助!拉尔斯
您不应该像使用DOM那样使用DOM作为数据源。无论如何,您可以手动检测更改以呈现DOM,然后在下一个tick中导出内容。
constructor(private changeDetector : ChangeDetectorRef) {}
this.objectlist.forEach(entry => {
this.getDataFromHTTP(entry).subscribe(response => {
this.changeDetector.detectChanges();//if using push stratagy
setTimeout(_=>tabledata.push(this.getTableDOM()));
})
})
还要检查this问题
您可以使用viewChildren
标记表格并访问它们
@ViewChildren("mytable") mytable;
this.mytable.changes.subscribe((el)=>{
/*check if desired table node exists on el*/
});
请看看我创建的这个DEMO,希望它会让你朝着正确的方向前进。就像其他人从你提供的内容中提到的那样,很难全面了解情况。我认为你正在寻找的是像OnChanges,我在下面列出了相关的示例代码。我还在演示中包含了一个forkJoin示例。
import {
Component,
Input,
OnChanges,
SimpleChanges
} from '@angular/core';
@Component({
selector: 'on-change',
template: `
<pre>
{{changes | json}}
</pre>
`
})
export class OnChangeComponent implements OnChanges {
@Input() data: any;
changes;
constructor() {}
ngOnChanges(changes: SimpleChanges) {
this.changes = changes;
}
}