如何获取li标签中的属性值?

Question

我正在使用角度 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 标签给了我属性的值，但 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 });
})
}