Question

我有一个条目列表。当我单击这样的条目时，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更改完成。也许我实现目标的方法是完全错误的。但如果是这样，我该怎么办？

谢谢您的帮助！拉斯

Answer 1

您不应像现在那样使用DOM作为数据源。无论如何，您可以手动检测更改以呈现DOM，然后在下一个刻度中导出内容。

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*/
});

Answer 2

请参阅我创建的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;
  }
}

Answer 3

这将每2秒检查一次...

$( document ).ready(function() {

$("#s1").on('change', function(){
debugger;
if($("#s1 option:selected").val() == 1)
{
$("#changeinput").html("");
$("#changeinput").html('<input type="text" name="lotNo" onchange="function1();">')
}else
{
$("#changeinput").html("");
$("#changeinput").html('<input type="text" name="lotNo" onchange="function1();function2();">')
}

});

});

如何在Angular 7中等待，直到DOM更改就绪？

3 个答案: