将枚举值传递给angular 2组件

发布时间：2020-12-17 17:29:08 所属栏目：安全来源：网络整理

导读：我有一个枚举, 并希望从模板传递枚举值.这怎么可能？ 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',} 我的

我有一个枚举,

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

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

解决方法

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

@Component({
  selector: 'row-general',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来获取枚举对象并将其复制(引用它将无效).现在你已经在组件中枚举了实例,你可以自由地使用它作为模板.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!