Angular 5 将 Enum int 转换为字符串

Question

我想将枚举显示为字符串，但它显示为数字。

我正在从 Web 服务接收一个 json 对象并将其映射到我的打字稿对象

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...
}

我的组件进行调用并将其添加到相关属性

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

当我在模板中显示 {{property.letType}} 时显示：

4我要显示商业

我已尝试遵循在我添加的模板中找到的答案

{{LetType[property.letType]}}

并在我的组件中添加了

LetType = this.LetType;

但我总是在控制台中收到以下错误

Cannot read property '4' of undefined

我做错了什么？

Answer 1

感谢@Harry Ninh 的评论，我得以解决我的问题。

{{property.letType}} 显示 0 我想要它显示 My Enum Value

注意： 我没有在我的问题中要求拆分外壳，但我在这里提供了，因为我觉得很多将枚举显示为字符串值的人可以找到有用

第 1 步将所需的枚举（在我的例子中是 LetType）添加到您的组件

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

第 2 步创建自定义管道以将您的数字转换为字符串

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(",", " ");;
    }
}

第 3 步将您的管道添加到 table

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

Answer 2

您不需要在此处创建管道。这是我的答案。

让-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
    });
  }
}

然后在你的 html

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

Answer 3

你可以在没有管道的情况下做到这一点：

LetType : typeof 
LetType = LetType ;

并在 html 页面中：

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

和以前一样。

Angular 5 将 Enum int 转换为字符串

Angular 5 convert Enum int to string

angular2-template

angular

angular5