Question

我有一个用户名下拉列表。我想按字母顺序排序。我怎样才能做到这一点？

<md-select formControlName="user" id="user" style="min-width: 200px;">
                <md-option *ngFor="let user of users" [value]="user.id">
                    {{user.displayName}}
                </md-option>
            </md-select>

Answer 1

您可以为此构建自定义OrderBy管道。

例如，下面的OrderBy管道将按照您按字母顺序或基于值（订单： asc ）传递给它的key对对象数组进行排序：

@Pipe({name: 'OrderBy'})
export class OrderByPipe implements PipeTranform {
  transform(input: any, key: string) {
    if (!input) return [];

    return input.sort(function(itemA, itemB) {
      if (itemA[key] > itemB[key]) {
        return 1;
      } else (itemA[key] < itemB[key]) {
        return -1;
      } else {
        return 0;
      }
    });
  }

}

并在您的模板中如下：

<md-option *ngFor="let user of users | OrderBy: 'id'" [value]="user.id">`

不要忘记将OrderByPipe添加到declarations NgModule。

<强> UPD：

由@DeborahK和角度附录 No FilterPipe or OrderByPipe （最后一部分）回答，带有不纯管道的OrderBy可能会导致性能问题，所以我在这里提供一个纯管道，这意味着您可以确定何时触发OrderBy管道，它为输入数组提供一个新实例或更改转换为管道的参数。

<强> Plunker Demo

Angular Material - 按字母顺序下拉订单项

1 个答案: