Angular，如何对数组的翻译值进行排序

Question

在我的 Angular 6 应用程序中，我有一个像这样的数组：

0:"SINGLE_VISION"
1:"PROGRESSIVE"
2:"BIFOCAL"
3:"DEGRESSIVE"
4:"FILTER"

它显示在带有翻译管道（ngx-translate）的垫选择中。

<mat-select placeholder="placeholder" formControlName="type"> 
 {{ type | translate}} </mat-option>
 </mat-select>

现在数组按原始值排序，但我想按翻译后的值排序（并维护数组内的原始值）。

因此，我的数组保持原样，但如果我打开垫选择，我会看到按正确顺序排列的翻译。

有聪明的方法可以做到这一点吗？

Answer 1

您可以创建一个pipe来对数组进行排序。instant()您将使用以下函数对每个值的翻译进行排序TranslateService：

import { Pipe }             from '@angular/core';
import { PipeTransform }    from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'orderTranslate'
})
export class OrderTranslatePipe implements PipeTransform
{
  constructor(private translate : TranslateService) {}

  transform(array: Array<string>): Array<string>
  {
    array.sort((a: any, b: any) =>
    {
      if (this.translate.instant(a) < this.translate.instant(b))
        return -1;
      else if (this.translate.instant(a) > this.translate.instant(b))
        return 1;
      else
        return 0;
    });
    return array;
  }
}

并在您的中使用它mat-select：

<mat-form-field>
  <mat-select placeholder="Test">
    <mat-option *ngFor="let v of values | orderTranslate" [value]="v">
      {{ v | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>