加载下拉值字母顺序角度6答案

【问题标题】：load drop down values alphabetic order angular 6加载下拉值字母顺序角度6
【发布时间】：2019-09-14 11:47:17
【问题描述】：

我正在尝试按字母顺序加载下拉菜单。目前我使用唯一值管道进行下拉。我如何添加另一个管道以获取字母顺序..

<select class="form-control fix-dropdown" required  
    (change)="batchSorceList();"
    [ngClass]="{'is-invalid':glheaderform.submitted && orgname.invalid}"
    #orgname="ngModel" [(ngModel)]="orgNameModel.orgName"
    name="orgName"> 
        <option value="undefined" disabled="true">--Select--</option>
        <option *ngFor="let bank of orgNameModel | unique ">{{bank.orgName}}</option> 
</select>

【问题讨论】：

标签： javascript angular angular6

【解决方案1】：

作为 Angular 的最佳实践，您不应使用 OrderPipe

如果要根据名称对项目进行排序，请使用纯javascript排序功能，如下所示

sortBy(prop: string) {
  return this.orgNameModel.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
}

在您的 HTML 中，

<option *ngFor="let bank of of filterBy('orgName')"| unique ">{{bank.orgName}}</option>

【讨论】：

这应该是公认的答案！如果我错了，请纠正我，但我认为 orderBy 管道不再在 Angular 上可用？

【解决方案2】：

使用orderBy对选择框进行排序

<option *ngFor="let bank of orgNameModel | unique | orderBy : 'your column name' ">{{bank.orgName}}</option>

【讨论】：

"Angular 没有 FilterPipe 或 OrderByPipe，原因在本页的附录中解释。" angular.io/guide/pipes#built-in-pipes

【解决方案3】：

使用排序功能实现这样的管道（请参阅此处：https://stackblitz.com/edit/angular-d17atb）-

@Pipe({name: 'sortBy'})
export class SortByPipe implements PipeTransform {
  transform(value: any[]) : any[] {
    value.sort(function(a,b){
    let alc = a.toLowerCase(),
    blc = b.toLowerCase();
    return alc > blc ? 1 : alc < blc ? -1 : 0;
 });
    console.log(value);
    return value;
  }
}

而 html 会像 -

 <li *ngFor="let value of list | sortBy">{{value}}</li>

【讨论】：