Передать массив JSON пользовательскому элементу в Angular?

Question

Я не могу передать массив JSON в угловой компонент (пользовательский элемент).У меня есть код, в котором я перебираю массив JSON, и у меня есть данные массива, настроенные в @Inject.Пример:

import {
  Input,
  Component,
  ViewEncapsulation,
  EventEmitter,
  Output
} from '@angular/core';

@Component({
  selector: 'custom-wrapper',
  template: `
  <ul>
      <li *ngFor="let item of items
        {{ item.title }}
        {{ item.age }}
      </li>
    </ul>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class WrapperComponent {
  @Input() items: any[];
}

Затем в моем файле index.html я вызываю custom element и пытаюсь передать в него массив объектов JSON, например:

<custom-wrapper [items]="[{"title": "Mr", "age" : 23}, {"title": "Ms", "age" : "25"}]"></custom-wrapper>

Все, что я получаю, это пустое <custom-wrapper [items]="[{"title": "Mr", "age" : 23}, {"title": "Ms", "age" : "25"}]"></custom-wrapper>, когда я нахожусь в режиме проверки, и ничего не отображается в списке.

Может ли кто-нибудь помочь мне найти проблему?

Answer 1

Вы должны передать свой массив, используя одинарные кавычки, так как вы используете двойные кавычки для атрибутов.

Так что это должен быть ваш index.html:

<custom-wrapper [items]="[{title: 'Mr', age: 23}, {title: 'Ms', age: 25}]"></custom-wrapper>

Такжев WrapperComponent исправьте li так:

<li *ngFor="let item of items">