querySelector не находит элементы внутри ng-контейнера - PullRequest
Новая
       17

querySelector не находит элементы внутри ng-контейнера

0 голосов
/ 20 апреля 2019

Я разрабатываю веб-приложение, используя угловой дартс.

Я пытаюсь найти элемент 'div' внутри компонента, используя document.querySelector (), и я пытаюсь изменить (добавить некоторое содержимое в)его тело.

Но, похоже, элемент '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-контейнер и иметь только «div» на странице, как показано ниже, и, похоже, это работает !.

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

В чем проблема?

TIA.

Ответы [ 2 ]

0 голосов
/ 20 апреля 2019

Вы можете сделать его отдельным компонентом, назовем его 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 изнутри.

0 голосов
/ 20 апреля 2019

Никогда не используйте querySelector, чтобы найти элементы в вашем шаблоне. Angular и DOM - две отдельные парадигмы, и вы не должны смешивать их.

Чтобы найти элемент в вашем шаблоне, используйте ссылку на элемент. 

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

Тогда вы можете ссылаться на div из вашего кода.

См. https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af для объяснения.

...