当html完全加载时，Angular 4执行函数

Question

我在Angular 4中使用typescript / components进行异步HTTP调用时出现问题...我创建了一个对象数组，在HTML中我在对象旁边有复选框。现在我希望通过执行角度函数来检查某些对象。但是当我做的时候

 (document.getElementById(id) as HTMLInputElement).checked = true;

在我的组件中。 但是当我在按下按钮时执行的函数中执行相同的代码时，它无法找到该元素。所以问题是当我执行函数时HTML没有完全加载。如何确保HTML已完全加载？

Answer 1

是的你不应该操纵DOM。

• 使用哈希在HTML中标记HTML元素。

  <input ... #inputname />

• 检索到ts控制器组件。

  @ViewChild('inputname') theinput;

• 查看init之后检查。如果选中 ngAfterViewInit

  ngAfterViewInit() { ... (this.form as HTMLInputElement).checked ... }

Answer 2

将此作为最后一个选项，因为我不建议在Angular中直接进行DOM操作。但是，如果您仍然遇到问题，可以使用解决方案。

在构造函数中，

let interval = setInterval(() => {
        let flag = self.checkFunction();
        if (flag)
            clearInterval(interval);
    }, 100)

现在创建函数

checkFunction() {
    if(document.getElementById(id)){
         (document.getElementById(id) as HTMLInputElement).checked = true;
         return true;
    }
    return false;
}