如何在Angular 7 Material Design的打字稿中按字母顺序对mat-option进行排序？

Question

根据Angular documentation，有no个orderBy管道可用于排序。根据文档，我必须自己在组件中实现排序。由于我对Angular非常陌生，因此我不确定该如何做。有人可以帮忙吗？我正在寻找实际的代码，这将解决问题。

component.ts的代码-我想根据indianStates对viewValue进行排序：

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