时间戳

首页 > 解决方案 > 如何获取 li 标签内的属性值？

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

问题描述

我正在使用 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 标签返回 null 作为结果。

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

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

标签： javascripthtmlangulartypescriptfor-loop

解决方案

您可以使用此闪电战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 });
    })
  }

推荐阅读