角度のある素材 - アルファベット順のドロップダウンメニュー

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

コンポーネントクラスのユーザーの並べ替えを検討してください。次に、それがngForで使用されるときに順番になります。

ユーザーアレイの作成/取得に使用しているコンポーネントクラスコードを提供できる場合は、それを並べ替えるためのより具体的な提案を提供することができます。

現在のソート方法のためのドキュメントを見つけることができます：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort?v=example

var fruit = ['cherries', 'apples', 'bananas']; 
fruit.sort(); // ['apples', 'bananas', 'cherries'] 

Answer 2

あなたは、このためのカスタムOrderByパイプを構築することができます。 [並べ替えパイプ以下keyあなたがアルファベット順または値ベース（：ASC順）：と、それに渡されることにより、オブジェクト配列をソートします。例えば

@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">` 

鍛造しないでくださいあなたのdeclarationsにを追加してNgModuleを追加してください。

UPD：ので、ここで私はあなたができることを意味し、純粋なパイプを提供しています、パフォーマンス上の問題を引き起こす可能性が不純なパイプで@DeborahKと角付録No FilterPipe or OrderByPipe（最後の部分）、OrderByによって答えとして

入力配列に新しいインスタンスを与えるOrderBy Pipeをいつ起動するか、またはPipeに変換されたパラメータを変更するかを決定します。

Plunker Demo。