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的控制台将值显示为空。

ul标签为我提供了attribute的值，但是li标签返回的结果为null。

StackBlitz 链接为https://stackblitz.com/edit/angular-oaghq3

请帮助我设置和获取li标签的属性并检索数据。

Answer 1

您可以使用blitz中展示的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 });
    })
  }

如何获取li标签内的属性值？

1 个答案: