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

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 在被调用时还没有准备好。

所以我的问题是：我如何才能等到 DOM 更改完成后再致电 getTableDOM()。或者，也许我实现目标的方法是完全错误的。但如果是这样：否则我该怎么做？

感谢您的帮助！ 拉尔斯

Answer 1

请查看我创建的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 2

您不应该像现在这样使用 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 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);
    }

}