Question

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

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

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

＆＃39;家庭＆＃39;组件填充数组如下：

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

然后家庭将其发送到家庭的目标：

<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数组为ng

2 个答案: