md-selectでアレイを正しくグループ化するにはどうすればいいですか？

Question

どのようにMD-選択中のグループの配列へ？私の例では、今DEMO

これを正しく行うにはどのように任意のアイデアを動作していません？

app.ts

export class SelectFormExample { 
     selectedValue: string = 'Steak'; 

     foodsanddrinks = [ 
     {group: 'food', viewValue: 'Steak'}, 
     {group: 'food', viewValue: 'Pizza'}, 
     {group: 'food', viewValue: 'Tacos'}, 
     {group: 'drink', viewValue: 'Pepsi'}, 
     {group: 'drink', viewValue: 'Coca-cola'}, 
     {group: 'drink', viewValue: 'Fanta'} 
     ]; 
    } 

HTML

<md-select placeholder="Favorite food" [(ngModel)]="selectedValue"> 

    <div style="text-align: center;margin: 10px">Food</div> 
    <md-option *ngFor="let fooddrink of foodsanddrinks" [value]="fooddrink.viewValue"> 
     <div *ngIf="fooddrink.group === 'food'">{{fooddrink.viewValue}}</div> 
    </md-option> 

    <div style="text-align: center;margin: 10px">Drink</div> 
    <md-option *ngFor="let fooddrink of foodsanddrinks" [value]="fooddrink.viewValue"> 
     <div *ngIf="fooddrink.group === 'drink'">{{fooddrink.viewValue}}</div> 
    </md-option> 

    </md-select> 

    <p> Selected value: {{selectedValue}} </p> 

Answer 1

あなたは、次のパイプでこれを行うことができ、

import { Pipe } from '@angular/core'; 
@Pipe({ 
    name: 'menuGrouping', 
    pure: false 
}) 
export class MenuGrouping implements PipeTransform { 
    transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> { 
    if (items !== undefined) { 
     return items.filter(item => { 
     for (let field in conditions) { 
      if (item[field] !== conditions[field]) { 
      return false; 
      } 
     } 
     return true; 
     }); 
    } 
    } 
} 

とtemplate

で

<md-select placeholder="Favorite food" [(ngModel)]="selectedValue"> 
    <div style="text-align: center;margin: 10px">Food</div> 
    <md-option *ngFor="let fooddrink of foodsanddrinks | menuGrouping:{group:'food'}" [value]="fooddrink.viewValue"> 
    {{fooddrink.viewValue}} 
    </md-option> 
    <div style="text-align: center;margin: 10px">Drink</div> 
    <md-option *ngFor="let fooddrink of foodsanddrinks | menuGrouping:{group:'drink'}" [value]="fooddrink.viewValue"> 
    {{fooddrink.viewValue}} 
    </md-option> 
</md-select> 

DEMO

Answer 2

Material2#Beta.7ので、あなたはmd-optgroupコンポーネントを使用することができます。それを呼び出す

groupBy(arr, prop): any { 
    const result = arr.reduce((grouped, item) => { 
    const key = item[prop]; 
    grouped[key] = grouped[key] || []; 
    grouped[key].push(item); 

    return grouped; 
    }, {}); 

    return Object.keys(result).map(key => { 
    return { 
     key, 
     values: result[key] 
    }; 
    }); 
} 

：

を

あなたが必要な手順を見ることができます下：あなたがグループにあなたのアイテムを持っているすべての

まず...あなたはこのような関数を作成することができます

this.grouppedArray = this.groupBy(this.foodsanddrinks, 'group'); 

ここで値は、

に変換されます。テンプレートで今3210

[ 
    { 
    key: 'food' 
    values: // array with the food content 
    }, 
    { 
    key: 'drink' 
    values: // array with the drink content 
    } 
] 

、：

DEMO