web-dev-qa-db-fra.com

Angular 5 convert Enum int to string

Je voudrais afficher mon énumération sous forme de chaîne, mais elle s'affiche sous forme de nombre.

Je reçois un objet json d'un service Web et le mappe à mon objet TypeScript

getProperties(): Observable<Property[]> {
    return this.http.get<Property[]>(this.getallagentsproperties + '1');
}

export enum LetType {
    Notspecified = 0,
    LongTerm = 1,
    ShortTerm = 2,
    Commercial = 4
}

export class Property {
    ...other stuff...
    letType: LetType;
    ...other stuff...
}

Mon composant effectue l'appel et l'ajoute à la propriété correspondante

import { Component, OnInit } from '@angular/core';
import { Property } from './Property';
import { PropertyService } from '../properties.service';

@Component({
  selector: 'app-properties',
  templateUrl: './properties.component.html',
})

export class PropertiesComponent implements OnInit {
  properties: Property[];
  constructor(private propertyService: PropertyService) { }
  ngOnInit() {
    this.getProperties()
  }
  getProperties(): void {
    this.propertyService.getProperties()
        .subscribe(p => this.properties = p);
  }
}

Lorsque j'affiche {{property.letType}} dans mon modèle s'affiche:

4 Je veux qu'il affiche Commercial

J'ai essayé de suivre la réponse trouvée ici dans mon modèle j'ai ajouté

{{LetType[property.letType]}}

et dans mon composant j'ai ajouté

LetType = this.LetType;

mais je reçois toujours l'erreur ci-dessous dans la console

Impossible de lire la propriété "4" de non défini

Qu'est-ce que je fais mal?

angularangular2-templateangular5
5
tony09uk

Grâce au commentaire de @Harry Ninh, j'ai pu résoudre mon problème.

{{property.letType}} affiché 0 Je voulais qu'il s'affiche My Enum Value

note: Je n'ai pas demandé la casse divisée dans ma question, mais j'ai fourni qu'ici, car je pense que beaucoup de gens qui affichent une énumération comme une valeur de chaîne pourraient la trouver utile

Étape 1 Ajoutez l'énumération requise (LetType dans mon cas) à votre composant

import { Component, OnInit, Type } from '@angular/core';
import { Property, LetType} from './Property';
import { PropertyService } from '../properties.service';

@Component({
    selector: 'app-properties',
    templateUrl: './properties.component.html',
})
export class PropertiesComponent implements OnInit {

    properties: Property[];
    LetType = LetType;

    constructor(private propertyService: PropertyService) { }

    ngOnInit() {
        this.getProperties();
    }

    getProperties(): void {
        this.propertyService.getProperties()
            .subscribe(p => this.properties = p);
    }
}

étape 2 créez un tube personnalisé pour convertir votre numéro en chaîne

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

@Pipe({
  name: 'eNumAsString'
})

export class ENumAsStringPipe implements PipeTransform {
    transform(value: number, enumType: any): any {
        return enumType[value].split(/(?=[A-Z])/).join().replace(",", " ");;
    }
}

Étape 3 Ajoutez votre pipe à la table

...other html table tags...
    <td>{{property.letType | eNumAsString:LetType}}</td>
...other html table tags...
6
tony09uk

Vous n'avez pas besoin de créer un tuyau ici. Voici ma réponse.

let-type.enum.ts

export enum LetType{
  Type1 = 1,
  Type2 = 2,
  Type3 = 3,
  Type4 = 4
}

property.model.ts

export interface Property{
   ...other stuff...
   letType: LetType;
   ...other stuff...
}

properties.component.ts

import { Component, OnInit } from '@angular/core';
import { Property} from './property.model';
import { LetType} from './let-type.enum';
import { PropertyService } from '../properties.service';

@Component({
   selector: 'app-properties',
   templateUrl: './properties.component.html',
})
export class PropertiesComponent implements OnInit {

  properties: Property[] = [];
  LetType = LetType;

  constructor(private propertyService: PropertyService) { }

  ngOnInit() {
     this.getProperties();
  }

  getProperties() {
    this.propertyService.getProperties().subscribe(result => {
         this.properties = result
    });
  }
}

Puis dans votre html

<ng-container matColumnDef="columnName">
   <th mat-header-cell *matHeaderCellDef >Types</th>
   <td  mat-cell *matCellDef="let element">{{LetType[element.letType]}}</td>
</ng-container>
10
Dhanika

Vous pouvez le faire sans pipe:

LetType : typeof 
LetType = LetType ;

et dans la page html:

<td  mat-cell *matCellDef="let element">{{LetType[element.letType]}}</td>

comme avant.

4
user10453112