Как отсортировать mat-option по алфавиту в машинописи в Angular 7 Material Design?

Question

Согласно Angular документации , существует нет трубы OrderBy, доступной для сортировки. Согласно документации, я должен реализовать сортировку в компоненте самостоятельно. Поскольку я очень новичок в Angular, я не уверен, как go об этом. Может кто-нибудь, пожалуйста, помогите? Я ищу фактический код, который сделает свое дело.

Код для 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