Angular 2 - 子列表循環選擇html元素

Question

我有一個像這樣的對象數組。

{ 
    id: 1, 
    name: 'Name 1' 
    children: [ 
    { 
     id: 2, 
     name: 'Name 2' 
    } 
    ] 
}, 
{ 
    id: 3, 
    name: 'Name 3' 
    children: [ 
    { 
     id: 4, 
     name: 'Name 4' 
    } 
    ] 
} 

現在我需要將它們的所有選項都設置爲select元素。

如果我讓

<option *ngFor="let element of elements" value="{{element.id}}">― {{element.name}}</option> 

這將只顯示 「名稱1」 和 「3名」。我應該如何使循環包括所有元素

我不想使用4項的數組。我試圖找到一種方法，而不需要改變的陣列

「名稱1」， 「2名」， 「NAME3」， 「姓名4」

謝謝

Answer 1

1）你可以利用ngForTemplate達到期望的結果：

<select> 
    <ng-template ngFor [ngForOf]="elements" [ngForTemplate]="itemTemplate"></ng-template> 
    <ng-template #itemTemplate let-element> 
    <option value="{{element.id}}">― {{element.name}}</option> 
    <ng-template ngFor [ngForOf]="element.children" [ngForTemplate]="itemTemplate"></ng-template> 
    </ng-template> 
</select> 

應該爲子元素中的任何級別上工作

Plunker Example

2）另一種可能是使用自定義的管道，如：

@Pipe({ 
    name: 'flatten' 
}) 
export class FlattenPipe { 
    transform(arr: any[], property: string) { 
    if(!arr) return []; 
    return arr.reduce((acc, cur) => { 
     return [...acc, cur, ...this.transform(cur[property], property)]; 
    }, []) 
    } 
} 

，並在HTML

<select> 
    <option *ngFor="let element of elements | flatten: 'children'" value="{{element.id}}">― {{element.name}}</option> 
</select> 

也應該爲子元素中的任何級別上工作

Plunker Example