Pass enum value to angular 2 component

问题

I have an enum,

and want to pass from template the enum value. How is this possible?

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',

}

my template. Here i want to pass the enum value

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

//this throws an error: Unable to get property COUNTRY of undefined or null reference.

my component:

@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;
  }

if I normaly call FIELDS.COUNTRY in the component I get the value 'Country'. That´s what I neeed.

Anybody know, how can I pass the enum value?

Thx in advance

回答1:

You can't access enums directly form you template. Alternately, you can copy them into your component and then use it in your component.

@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;
  }

I've used Object.assign to take the enum object and copy it (Reference to it won't work ). Now you have you enum instance in your component and you can use it freely it your template as well.

回答2:

Just to update the answer for Angular 4+ versions and TypeScript 2.4 and above.

Passing Enums to Angular components is way simpler.

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

  @Input() type: PersonTypes;
}

Using the PersonComponent in another Container:

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

  personType = PersonTypes.MALE;
}

In the View template:

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

In case if you need access to all the enum properties: then in the container app, expand personType = PersonTypes

And use the properties accordingly.

回答3:

You have to make the enum a property of your component class.

export class ModifyInvalidRowGeneralComponent {
    public fields: FIELDS;
    // ...

    // takes parameter of type FIELDS enum
    public validate(field: FIELDS): boolean {

And in your html:

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

来源：https://stackoverflow.com/questions/45799745/pass-enum-value-to-angular-2-component

标签

angular

typescript

angular2-template