将枚举值传递给角度2分量

Question

我有一个枚举，

并希望从模板传递枚举值。这怎么可能？

export enum FIELDS {
    GENDER = <any>'Gender',
    SALUTATION = <any>'Salutation',
    FIRSTNAME = <any>'First Name',
    LASTNAME = <any>'Last Name',
    EMAIL_ADDRESS = <any>'Email Address',
    COUNTRY = <any>'Country',

}

我的模板。在这里我想传递枚举值

 [ngClass]="{'error':validate(FIELDS.COUNTRY)}" 

//这将引发错误：无法获取未定义或空引用的属性COUNTRY。

我的组件：

@Component({
  selector: 'row-general',
  template: require('./modify-invalid-row-general.component.html'),
  styleUrls: ['./app/nedit/modify-invalid-row/modify-invalid-row.component.css']
})
export class ModifyInvalidRowGeneralComponent {

  @Input() row: UploadRow;
  @Input() columns: ConfigColumn[];

  @Output() validateRow = new EventEmitter<UploadRow>();

  public validate(field: string): boolean {

    let invalidFields: string[] = [];
    if (this.row.invalidFields != null)
      invalidFields = this.row.invalidFields.split(';');
    for (let i = 0; i < invalidFields.length; i++) {
       if (invalidFields[i].trim() == field.trim())
        return true;
    }
    return false;
  }

如果我通常在组件中调用FIELDS.COUNTRY，则会得到值“ Country”。那就是我所需要的。

有人知道，如何传递枚举值？

提前Thx

Answer 1

只是为了更新 Angular 4+ 版本和 TypeScript 2.4 及更高版本的答案。

将枚举传递给 Angular 组件要简单得多。

 export enum PersonTypes {
  MALE = 'male',
  FEMALE = 'female'
}
@Component({
  selector: 'app-person-info'
})
export class PersonComponent implements OnInit {

  @Input() type: PersonTypes;
}

在另一个容器中使用 PersonComponent：

@Component({
  selector: 'app-container'
})
export class AppContainerComponent implements OnInit {

  personType = PersonTypes.MALE;
}

在视图模板中：

<app-person-info [type]="personType"></app-person-info>

如果您需要访问所有enum属性：然后在容器应用程序中，展开personType = PersonTypes

并相应地使用属性。

Answer 2

您无法直接从模板访问枚举。或者，您可以将它们复制到组件中，然后在组件中使用它。

@Component({
  selector: 'row-general',
  template: require('./modify-invalid-row-general.component.html'),
  styleUrls: ['./app/nedit/modify-invalid-row/modify-invalid-row.component.css']
})
export class ModifyInvalidRowGeneralComponent {

  @Input() row: UploadRow;
  @Input() columns: ConfigColumn[];

  @Output() validateRow = new EventEmitter<UploadRow>();

  FILEDS:any=Object.assign({},FIELDS);

  public validate(field: string): boolean {

    let invalidFields: string[] = [];
    if (this.row.invalidFields != null)
      invalidFields = this.row.invalidFields.split(';');
    for (let i = 0; i < invalidFields.length; i++) {
       if (invalidFields[i].trim() == field.trim())
        return true;
    }
    return false;
  }

我使用Object.assign来获取枚举对象并复制它（引用它是行不通的）。现在您的组件中已经有了枚举实例，您也可以在模板中自由使用它。