Angular2&TypeScript:在html中使用enum显示相应内容: {{}}和select

在ts中获取的数据为number类型，想在html中显示为对应的文字。

需要在ts中指定枚举类型的引用变量：

 

ts：

 

@Component({
    selector: 'pakcage-privilege',
    templateUrl: './package-privilege.component.html',
    styleUrls: ['./package-privilege.component.css']
})

export class PackagePrivilegeComponent{

packages: Package[];

DataType:typeof DataType=DataType;
TextType:typeof TextType=TextType;
}

interface Package {
    id: String;
    issueId: String;
    issueName: String;
    zipId: String;
    zipName: String;
    dataType: number;
    textType: number;
    fileSize: number;
    url: String;
    createDate: String;
    note: String;
}

enum DataType {
    发明1 = 1,
    新型2 = 2,
    外观3 = 3,
    授权4 = 4,
    类型5 = 5,
    类型6 = 6
}

enum TextType {
    著录项1 = 1,
    全文pdf2 = 2,
    全文以及附图3 = 3
}

 

html

<tbody>
   <tr *ngFor="let item of packages">
         <th scope="row">{{item.id}}</th>
         <td>{{item.issueId}}</td>
         <td>{{item.issueName}}</td>
         <td>{{item.zipId}}</td>
         <td>{{item.zipName}}</td>
         <td>{{DataType[item.dataType]}}</td>
         <td>{{TextType[item.textType]}}</td>
         <td>{{item.fileSize}}</td>
         <td>{{item.createDate}}</td>
    </tr>
</tbody>

 

/*2017.9.29更新*/

当需要利用enum显示为selection

html

<tr>
      <th>数据类型</th>
      <td> 
            <select class="form-control" [(ngModel)]="package.dataType" (ngModelChange)="changeOption()">

                 <option *ngFor="let key of dataTypeKeys" [value]="key" [label]="DataType[key]"></option>
             </select>                                                    
       </td>
 </tr>

ts

ngOnInit(): void {
       this.dataTypeKeys = Object.keys(this.DataType).filter(f=>!isNaN(Number(f)));
}

changeOption():void{
//execution when change options in select.
}

 

参考：

https://www.gurustop.net/blog/2016/05/24/how-to-use-typescript-enum-with-angular2/

https://stackoverflow.com/questions/35750059/select-based-on-enum-in-angular2

/*2017.10.30*/

https://stackoverflow.com/questions/46998065/onchange-not-working-for-angular4-select-in-dropbox       //(关于option改变时change和ngModelChange的区别)