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">

将JSON数组传递给Angular中的自定义元素？

1 个答案: