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