querySelector似乎没有在ng-container中找到元素

Question

我正在使用角镖开发一个Web应用程序。

我试图使用document.querySelector（）在组件中找到一个'div'元素，我试图修改（添加一些内容）其主体。

但它似乎没有找到'div'元素。

这是我的HTML：

<ng-container *ngFor="let item of list">
  <ng-container *ngIf="item.canShowChart">
    <div [id]="item.elementID" class="chart"></div>
  </ng-container>
</ng-container>

这是我的组件方法，它试图修改'div'：

  void drawChart() {
    for (final item in list) {
      if (!item.canShowChart) {
        continue;
      }
      final DivElement _container = document.querySelector('#' + item.elementID);
      print(_container);
    }
  }

它始终将'_container'打印为'null'

我尝试删除ng-container并在页面中只有'div'，如下所示，它似乎工作！

<div [id]="item.elementID" class="chart"></div>

问题是什么？

TIA。

Answer 1

你可以把它作为一个单独的组件，我们称之为app-chart：

<ng-container *ngFor="let item of list">
  <app-chart *ngIf="item.canShowChart" [item]="item">
  </app-chart>
</ng-container>

在AppChartComponent中声明必要的输入，并在构造函数中注入ElementRef：

@Input() item: any;
constructor(private ref: ElementRef) {}

this.ref.nativeElement是你如何从内部访问DOM元素。

Answer 2

切勿使用querySelector在模板中查找元素。 Angular和DOM是两个独立的范例，你不应该混合它们。

要在模板中查找元素，请使用对元素的引用。

<div #chartContainer class="chart"></div>

然后你可以从你的代码中引用div。

请参阅https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af以获得解释。