如何在 Angular 7 Material 设计中按字母顺序对 mat-option 进行排序？

Question

根据Angular documentation，没有 orderBy 管道可用于排序。根据文档，我必须自己在组件中实现排序。由于我是 Angular 的新手，我不确定如何去做。有人可以帮忙吗？我正在寻找可以解决问题的实际代码。

component.ts 的代码 - 我想按照 viewValue:

对 indianStates 进行排序

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'addressentry',
  templateUrl: './addressentry.component.html',
  styleUrls: ['./addressentry.component.css']
})
export class AddressentryComponent implements OnInit {    
  constructor() { }    
  ngOnInit() {}

  indianStates: IndianStates[] = [
    {value: 'westbengal', viewValue: 'West Bengal'},
    {value: 'sikkim', viewValue: 'Sikkim'},
    {value: 'assam', viewValue: 'Assam'}
  ];
}

export interface IndianStates {
  value: string;
  viewValue: string;
}

HTML代码：

<div class="col form-group">
    <mat-form-field>
      <mat-label >State</mat-label>
      <mat-select>
        <mat-option *ngFor="let state of indianStates" [value]="state.value">
          {{state.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

Answer 1

在组件中对其进行排序，然后将排序后的数组提供给模板。

演示示例（假设您想按字母顺序排序）：Stackblitz

如何在 Angular 7 Material 设计中按字母顺序对 mat-option 进行排序？

How to sort mat-option alphabetically in typescript in Angular 7 Material Design?

sorting

typescript

angular-material2

angular