如何獲取li標簽內的屬性值？

Question

我正在使用angular 6應用程序，通過屬性傳遞數據，

首先，我在ul標簽中給出了[attr.parent_id] ，

<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標簽為我提供了attribute的值，但li標簽返回的結果為null。

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 });
    })
  }