Question

如何在md-select中对数组进行分组？在我的示例中现在不起作用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');

现在，这些值将转换为：

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

现在，在模板中：

<md-select placeholder="Foods and Drinks" [(ngModel)]="selectedValue">
  <md-optgroup *ngFor="let optGroup of grouppedArray" [label]="optGroup.key">
    <md-option *ngFor="let optValue of optGroup.values" [value]="optValue.viewValue">
      {{ optValue.viewValue }}
    </md-option>
  </md-optgroup>
</md-select>

DEMO

如何正确地在md-select中对数组进行分组？

2 个答案: