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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了querySelector似乎没有在ng-container中找到元素相关的知识,希望对你有一定的参考价值。

我正在使用角镖开发一个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。

答案

你可以把它作为一个单独的组件,我们称之为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元素。

另一答案

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

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

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

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

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

以上是关于querySelector似乎没有在ng-container中找到元素的主要内容,如果未能解决你的问题,请参考以下文章

XPath 还是 querySelector?

querySelector和getElementsBy系列的区别

querySelector和getElementsBy系列的区别

querySelector和getElementsBy系列的区别

querySelector和getElementsBy系列的区别

自定义元素上的 QuerySelector