Как выбрать элемент html, который динамически загружается в Angular? - PullRequest
Новая
       16

Как выбрать элемент html, который динамически загружается в Angular?

1 голос
/ 30 января 2020

Я хочу выбрать указанный c html элемент, который создается динамически. Но переменная list, которая создает блоки html, заполняется запросом http и dom не загружается сразу. Я хочу выбрать элемент с помощью идентификатора, который был получен из URL, и равен идентификатору элемента списка. Таким образом, выбранный элемент не определен, даже если я выберу элемент в хуке ngAfterViewInit. Как я могу выбрать?

HTML

<div id="wrapper">
    <ng-container *ngFor="let item of list">
        <div [id]="item.id">{{item.content}}</div>
    </ng-container>
</div>

TS 

list = null;
selectedItemId = null;

ngOnInit() {
    this.selectedItemId = this.activatedRoute.snapshot.params.id;
}

getList() {
    this.http.get('http://api.example.com').subscribe(
        result => this.list = result
    )
}

ngAfterViewInit() {
    const htmlElement= document.getElementById(this.selectedItemId);

    /* Some codes that using htmlElement variable */
}

Ответы [ 2 ]

1 голос
/ 30 января 2020

Если вы ссылаетесь на элементы HTML с помощью @ViewChildren, вы можете подписаться на событие QueryList.changes, чтобы получать уведомления о появлении элементов в DOM.

В шаблоне установите ссылочная переменная шаблона для элементов элемента: 

<div id="wrapper">
  <ng-container *ngFor="let item of list">
    <div #itemElement [id]="item.id">{{item.content}}</div>
  </ng-container>
</div>

В коде используйте это имя переменной для ссылки на элементы с ViewChildren: 

@ViewChildren("itemElement") private itemElements: QueryList<ElementRef>;

ngAfterViewInit() {
  this.itemElements.changes.subscribe(() => {
    console.log("Item elements are now in the DOM!", this.itemElements.length);
    const htmlElement = document.getElementById(this.selectedItemId);
    ...
  });
}

См. это стекаблиц для демонстрации. Обратите внимание, что ng-container не требуется, если он содержит только один элемент div. Вы можете применить директиву *ngFor непосредственно к этому элементу.

0 голосов
/ 30 января 2020

вы можете использовать setTimeout (После завершения http-запроса ваш код выполняется, затем вы покинули зону и Angular выполните проверку и добавите элементы после истечения времени ожидания): 

this.http.get('http://api.example.com').subscribe(
    result => this.list = result;
    setTimeout(() => console.log(document.getElementById(this.selectedItemId)))
)
...