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

Question

我正在使用 angular dart 开发一个 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

它不起作用，因为在您使用“querySelectorAll”时，angular 尚未将 ng-container 加载到 DOM。您应该将代码放在“AfterViewChecked”生命周期 Hook 中。

export class ImageModalComponent implements OnInit, AfterViewChecked{
  //AfterViewChecked
  ngAfterViewChecked {
    void drawChart() {
    for (final item in list) {
      if (!item.canShowChart) {
        continue;
      }
      final DivElement _container = document.querySelector('#' + item.elementID);
      print(_container);
    }
  }
 }
}

确保像这样导入“AfterViewChecked”；

import { Component, OnInit, AfterViewChecked } from '@angular/core';