Angular 6+: 在 ngFor 中从 @input 传递数组名

Question

我已经创建了一个列表组件，运行成功地通过项目数组并通过 *ngFor 循环输出其数据。

现在我想重用这个组件并添加更多可能的数据数组以供选择。为此，创建了一个@input，允许我将数组名称 "on" 传递给组件，无论它在哪里使用，但是当我尝试将它传递给 *ngFor 时，我得到一个错误。

我的 ts 代码是：

@Input() listName : string;
list1: any = [
 {title: 'title1'},
 {title: 'title2'},
 {title: 'title3'},
]
list2: any = [
 {title: 'titlea'},
 {title: 'titleb'},
 {title: 'titlec'},
]

组件如下所示：

<app-listcomp listName="list1"></app-listcomp>

我认为这不是组件内部的正确语法：

*ngFor="let listItem of {{listName}}"

但无法退出找到是通过@Input（或任何其他正确方式）传递数组名称的正确方法。

当我在 *ngFor 循环中使用特定的数组名称时 - 它当然完美无缺。

Answer 1

你可以这样做

Class:

getList() {
  return this[this.listName];
}

模板：

*ngFor="let listItem of getList()"

Answer 2

有多种解决方案，但这取决于全球环境和您真正需要的。

最简单的方案就是直接将期望的数组赋值给组件

组件代码中：

@Input()
myList: any[];

模板中：

*ngFor="let listItem of myList"

但是如果你真的需要它像你问题中提到的那样工作，就用一个方法。当然，您将需要传递一个字典（或映射），其中包含按名称索引的数组。

组件代码中：

@Input()
myLists: {[name: string]: any[]}; // dictionary of arrays indexed by name

getList(name: string): any[] {
   return this.myLists[name];
}

模板中：

*ngFor="let listItem of getList('the name I want')"

编辑

从你编辑后我在你的问题中看到的，我可以给你一个更接近你期望的答案。

组件代码中：

get selectedList(n): any[] {
   return this[this.listName];
}

模板中：

*ngFor="let listItem of selectedList"

Angular 6+: 在 ngFor 中从 @input 传递数组名

Angular 6+: Pass array name in ngFor from @input

arrays

let

ngfor

angular