如何使用Angular5在@Input中传递列表？

Question

我想知道如何通过输入传递列表。我在父组件中：

list: Hero[] = [{Id: 2, Name: "Sll"}, {Id: 3, Name: "Sldsadasd"}]

和html中的

<app-add-hero list="{{list}}" hero={{hero}}></app-add-hero>

和子组件

@Input() list : Hero[];
hero : Hero;
constructor() { }
printHero(): void{
    console.log(this.list[1]);
}

但控制台打印“ o”

Answer 1

删除不必要的插值，

-std=c++17

Answer 2

只需在Sajeetharan的答案上方加上

您在此处使用的插值语法（{{...}}）：

<app-add-hero list="{{list}}" hero={{hero}}></app-add-hero>

通常用于字符串，除非您将其与async和json管道一起使用。因此，这种语法通常用于将string的值作为@Input属性传递给组件。

因此，如果在您的ChildComponent中，list的类型为string：

@Input() list : string;

然后做<app-add-hero list="{{list}}" ...就可以了。

但是由于并非如此，因此您必须使用属性绑定语法（[nameOfTheInputProperty]="nameOfTheComponentPropertyToAssignFrom"），在您的情况下，该属性将是：

<app-add-hero list="{{list}}"></app-add-hero>

此外，由于hero不是在子组件上定义的@Input属性，因此您不能在父组件模板中使用它。