代码之家 › 专栏 › 技术社区 › Maniraj Murugan

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

for-loop typescript angular html javascript

Maniraj Murugan · 技术社区 · 6 年前

我使用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 将值显示为 无效的

ul标记给我attribute的值,但li标记返回null作为结果。

闪电战 https://stackblitz.com/edit/angular-oaghq3

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

1 回复 | 直到 6 年前

Jota.Toledo 6 年前

可以使用 ViewChildren blitz

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前