Question

我正在使用带有Typescript的angular来为我的应用程序创建前端。

我在创建选项的位置创建了一个select元素：

   <mat-option
        [value]="ift"
        *ngFor='let ift  of inputFileTypes | elements'>
        {{ "generator.inputFileType." + ift | translate}}
    </mat-option>

我正在使用管道获取枚举的所有元素

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'elements'
})
export class EnumElementsPipe implements PipeTransform {
    transform(data: Object) {
      return Object.keys(data);
    }
}

inputFileTypes是一个枚举（在component.ts中：inputFileTypes = InputFileType）

export enum InputFileType {
    TYPE1= 'TYPE1',
    TYPE2= 'TYPE2'
}

这会在Chrome和Opera中完美地创建带有选项的我的选择，但是在Firefox上不起作用。没有错误，但未创建选项。知道为什么吗？

Answer 1

如果您使用的是Angle> = 6.1.x版本，则可以通过使用KeyValuePipe来简化此操作，如下所示：

<mat-option
        [value]="ift"
        *ngFor='let ift  of inputFileTypes | keyvalue'>
        {{ "generator.inputFileType." + ift.key| translate}}
    </mat-option>

firefox中没有问题，请参见the following stackblitz

ngFor中的枚举迭代无法在Firefox中使用

1 个答案: