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

Question

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

现在我想重用这个组件并添加更多可能的数据数组以供选择。为此，创建了一个@input，允许我将数组名称“传递给”组件，无论它在哪里使用，但是当我尝试将它传递给*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

你可以这样做

类：

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"