如何从属性中获取数组值？答案

【问题标题】：How to get array values from attribute?如何从属性中获取数组值？
【发布时间】：2019-03-15 04:38:55
【问题描述】：

我在 Angular 6 中进行应用程序，当我在动态模式下发送和接收数据时，我需要通过我使用以下属性的属性传递和检索数组值，

HTML：

<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.items]="item"> {{item.name}} </li>
</ul>

TS：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChildren("li") listElements: QueryList<ElementRef<HTMLLIElement>>;
  name = 'Angular';
  items = [
    { "id": 123, "name": "hello" },
    { "id": 234, "name": "world" }
  ]
  ngAfterViewInit() {
    this.printElements();
    this.listElements.changes.subscribe(_ => this.printElements());
  }

  private printElements() {
    const elements = this.listElements.toArray();
    elements.forEach(element => {
      console.log(element.nativeElement.getAttribute('items'));
    })
  }
}

工作 Stackblitz：

https://stackblitz.com/edit/angular-jndtv1

这里不是

console.log(element.nativeElement.getAttribute('items'));

（给出[object object]）

如果我包含 JSON.stringify，

console.log(JSON.stringify(element.nativeElement.getAttribute('items')));

（给出“[object object]”）

请帮助我通过仅使用 Pure javascript/typescript 而不使用 jquery 的属性获取数组值。

【问题讨论】：

console.log(element.nativeElement.innerText);
@ritaj，我只需要通过属性获取值，我不应该使用 innerText。我也需要该属性的整个数组。element.nativeElement.innerText 只给出名称值。
你能检查一下吗？
@Asanka，哪个？
stackblitz.com/edit/angular-guqyan?file=src/app/…

标签： javascript arrays angular typescript attributes

【解决方案1】：

你可以这样做，不是好方法，但它有效：

在您的 html 中：

<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.items]="item | json"> {{item.name}} </li>
</ul>

在你的 ts 中：

private printElements() {
    const elements = this.listElements.toArray();
    elements.forEach(element => {
      console.log(JSON.parse(element.nativeElement.getAttribute('items')).id);
       console.log(JSON.parse(element.nativeElement.getAttribute('items')).name);
    })
  }

DEMO

【讨论】：