angular - querySelectorAll 不能与 Angular 一起使用，但可以在控制台中使用

Question

我有一个包含一些复选框的 div，我想使用这些复选框来访问这些复选框， querySelectorAll但它似乎在 Angular 中不起作用，尽管它在控制台中起作用。

@Component({
  selector: "formly-field-categories-helper",
  template: `
    <div [innerHTML]="categories"></div>
  `
})



ngOnInit() { 
 let inputs = '<input type="checkboxes" name="group" /> test`
 this.categories = this.sanitizer.bypassSecurityTrustHtml(inputs); 
}

ngAfterViewInit() {
  //alerts 0 
  alert(document.querySelectorAll('[name="groups"]').length);
}

但是当我打开 cosole 并运行document.querySelectorAll('[name="groups"]').length时，它给了我 192（不是 0）

您可以从这里查看完整代码 https://github.com/goblins-tech/almogtama3/blob/master/src/app/content/editor.ts#L248

注意 使用setTimeout将解决问题，但我不使用它。我只想在 DOM 完全创建后运行代码。

setTimeout(() => {
      alert(document.querySelectorAll('[name="groups"]').length);
    }, 5000);

note ngAfterViewChecked运行多次，所以我避免使用它。

在下一步中，我将替换document.querySelectorAll为nativeElement.querySelectorAll

Answer 1

再会！

你试过这样吗？

ngAfterViewInit() {
  setTimeout(() => {
    alert(document.querySelectorAll('[name="groups"]').length);
  });
}