Angular Material - 按字母順序排列下拉菜單項

我有一個帶有用戶名的下拉菜單。我想按字母順序排列。我怎樣才能做到這一點？Angular Material - 按字母順序排列下拉菜單項

<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>

來源

2017-05-11 Jay

考慮對組件類中的用戶組進行排序。然後它將在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']

來源

2017-05-11 16:52:32 DeborahK

，你可以創建一個自定義OrderBy管這個。

例如，下面的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">`

不要僞造t將OrderByPipe添加到您的declarations的NgModule。

UPD：

的回答@DeborahK和角附錄No FilterPipe or OrderByPipe（最後一部分），OrderBy有不純的管道可能會導致性能問題，所以我在這裏提供了一個純粹的管道，這意味着你可以確定何時觸發給輸入數組一個新實例的OrderBy管道或更改轉換爲管道的參數。

Plunker Demo。

來源

2017-05-11 17:04:55 Pengyy

構建OrderBy管道有潛在的性能問題。從文檔：Angular團隊和許多經驗豐富的Angular開發人員強烈建議將過濾和排序邏輯移植到組件本身中。如果這些性能和縮小比例考慮不適用於您，則始終可以創建自己的這種管道（類似到FlyingHeroesPipe）或在社區中找到它們。請參閱此處的附錄：https://angular.io/docs/ts/latest/guide/pipes.html – DeborahK

@DeborahK我知道性能問題。爲什麼在這裏我提供了一個純淨的管道，OP可以確定何時開啓管道。如果還有任何問題，請告訴我並且很高興學習。 – Pengyy

Angular Material - 按字母順序排列下拉菜單項

回答

相關問題