angular - 如何在 Angular 7 中等待直到 DOM 准备就绪?

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

感谢您的帮助! 拉斯

最佳答案

请看这个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;
  }
}

https://stackoverflow.com/questions/55439643/

相关文章:

ruby-on-rails - 如何锁定表以防止在 Rails 中使用记录创建?

html - 在 <input> 上使用 onChange 时未注册空间

reactjs - 如何修复 VSCode 中的 "Expression expected. ts(

angular - 有没有办法以编程方式触发 Angular 中的 onchange 事件? ( t

react-native - 错误无法构建 iOS 项目。我们运行了 "xcodebuild"命令,

ipython - 如何在 jupyter 笔记本中插入制表符而不是自动完成?

javascript - react-redux:元素类型无效

php - 清除 Lumen 框架中的缓存

git - 如何修复 git bash 错误异常 : STATUS_ACCESS_VIOLATION

python-3.x - Python3 requests.get 太慢