Angular 5 @Input 一个用于 ngFor 的数组

Question

我创建了一个对象列表，我想将其发送到目标组件进行显示。该对象称为 menuItem:

export class menuItem {
  title: string;
  link: string;

  constructor(Title: string, Link: string) {
    this.title = Title;
    this.link = Link;
  }
}

'home'组件像这样填充数组：

  options: Array<menuItem>;

  constructor() {
    this.options = new Array<menuItem>();
    let option = new menuItem('first', '/sample');
    this.options.push(option);
    option = new menuItem('second', '/another');
    this.options.push(option);
  }

然后 home 将其发送到 home html 中的目标：

<demo menu={{options}}></demo>
or
menu='options' or menu=[options] or ...

演示想执行以下操作：

<div *ngFor="let m of options">
  {{m.title}} = {{m.link}}
  <a [ngStyle]="{'margin': '15px 20px'}" routerLink={{m.link}} >{{m.title}}</a>
</div>

但是Angular抱怨：NgFor只支持绑定到Iterables比如数组。

有什么想法吗？提前致谢。

Answer 1

在这种情况下您需要使用的模板语法如下。

[menu]='options'

这就是将 options 中的值绑定到名为 menu 的属性的方式。

很高兴这对您有所帮助！

Answer 2

使用入参时需要使用[]，使用注解{{}}主要用于双向数据绑定

<demo [menu]='options'></demo>

Angular 5 @Input 一个用于 ngFor 的数组

Angular 5 @Input an array for ngFor

ngfor

angular