angular 4 - 自定义* ngFor用于通用数组

Question

我正在尝试在自定义指令（app-search-dropdown）中自定义这样的模板：

<li *ngFor="let item of list" [value]="item.code">
  <a (click)="setInputText(item.code)">{{item.description}}</a>
</li>

在这个指令中，我有：

@Input() list: any[];
@Input() description: any;
@Input() code: any;

在父组件的html模板上，我已经声明了指令：

<app-search-dropdown [list]="List" [code]="'param1' [description]="'param2'"></app-search-dropdown>

我有类似这样的List：

List1 = {["one": "1", "two": "2"],["one":"11", "two": "22"]}
List2 = {["uno": "1", "due": "2"],["uno":"11", "due": "22"]}

我向“app-search-dropdown”组件发送一个像List1或List2这样的通用数组，只显示传入[description]并在[value]中获取值的值。

例如：

<app-search-dropdown [list]="List1" [code]="'one' [description]="'two'"></app-search-dropdown>

我希望渲染的模板如下：

<li *ngFor="let item of list" [value]="item.one">
<a (click)="setInputText(item.one)">{{item.two}}</a>
</li>

我该怎么办？因为现在我将[code]和[description]作为字符串传递并且不起作用。 提前谢谢。

Answer 1

您可以将代码和说明用作每个项目对象的键

<a (click)="setInputText(item[code])">{{item[description]}}</a>