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>

我有一些這樣的列表類型：

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

我將“ List1”或“ List2”之類的通用數組發送到“ app-search-dropdown”組件，並僅顯示在[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>