Как получить значения массива из атрибута?

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

(который дает [объект объекта])

Если я включу JSON.stringify,

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

(дает "[объект объекта]")

Пожалуйста, помогите мне получить значения массива через атрибут, используя только Чистый 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