在DOM改变准备好之前，如何在Angular 7中等待？

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作为数据源。 无论如何，您可以手动检测更改以呈现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()));
    })
})

还要检查这个问题

您可以使用viewChildren标记表并访问它们

@ViewChildren("mytable") mytable;

this.mytable.changes.subscribe((el)=>{
    /*check if desired table node exists on el*/
});

Answer 2

请参阅我创建的这个DEMO ，希望它会让你朝着正确的方向前进。 就像其他人从你提供的内容中提到的那样，很难全面了解情况。 我认为你正在寻找的东西就像OnChanges ，我在下面列出了相关的示例代码。 我还在demo中包含了一个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秒检查一次......

public static void AngWait(){
    WebDriverWait jsWait jsExec = (JavascriptExecutor) driver;
    String angular5Check = (String) jsExec.executeScript("return getAllAngularRootElements()[0].attributes['ng-version'].value");
    System.out.println(angular5Check);
    if (angular5Check != null) {
        do {
            angularPageLoaded = (Boolean) jsExec.executeScript("return window.getAllAngularTestabilities().findIndex(x=>!x.isStable()) === -1");
            System.out.println("in loop => "+angularPageLoaded);
            Thread.sleep(2000);

        } while (!angularPageLoaded);

        System.out.println("outside loop => "+angularPageLoaded);
    }

}