Question

我正在用角度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'));
    })
  }
}

工作中的闪电战：

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]”）

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

Answer 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

如何从属性获取数组值？

1 个答案: