Как получить значение атрибута внутри тега li?

Question

Я использую приложение angular 6, где я передаю данные через атрибут,

Сначала я дал [attr.parent_id] в теге ul, например,

<ul class="list-unstyled" id="1" [attr.parent_id]="123"></ul>

Для которого я использовал,console.log(target.getAttribute('parent_id'));

И результат показывает 123.

Как и мне, мне нужно получить индекс из тега li, как у того же ul,

<ul class="list-unstyled" id="1" [attr.parent_id]="123">
      <li class="media p-2 column" *ngFor="let item of items;let i = index;" [attr.child_id]="i"></li>
</ul>

Здесь я дал [attr.child_id] для получения позиции индекса и использовал console.log(target.getAttribute('child_id'));.

Эта консоль получения child_id отображает значение как null .

Тег ul дает мне значение атрибута, но тег li возвращает в качестве результата ноль.

Ссылка StackBlitz была https://stackblitz.com/edit/angular-oaghq3

Пожалуйстапомогите мне установить и получить атрибут li тега и получить данные.

Answer 1

Вы можете запросить элементы с помощью декоратора ViewChildren, как показано в этом блице

<ul class="list-unstyled" id="list" [attr.parent_id]="123">
    <li #li class="media p-2 column" *ngFor="let item of items;let i = index;" [attr.child_id]="i"> {{item.name}} </li>
</ul>

@ViewChildren("li") listElements: QueryList<ElementRef<HTMLLIElement>>;

private printElements() {
    const elements = this.listElements.toArray();
    elements.forEach(element => {
      const isLiElemenet = element.nativeElement instanceof HTMLLIElement;
      const child_id = element.nativeElement.getAttribute('child_id');
      console.log({ isLiElemenet, child_id });
    })
  }