《Angular 中优雅地处理枚举值：Map + *ngIf as 替代多次 *ngIf》

weixin_li152********2026-06-12 8:58

首先看看多次*ngif：

Map数据

typescript 复制代码

export const stautsMap: {[key: number]: string} = {
  1: '是',
  0: '否',
  2: '未知',
};

Html页面需要多次*ngif判断多行结果

html 复制代码

<nz-tag *ngif="data?.realFiling == 1" nzColor="blue">{{statusMap[data?.realFiling]}}</nz-tag>
<nz-tag *ngif="data?.realFiling == 0" nzColor="red">{{statusMap[data?.realFiling]}}</nz-tag>
<nz-tag *ngif="data?.realFiling == 2">{{statusMap[data?.realFiling]}}</nz-tag>

优化之后：

Map数据

typescript 复制代码

export const statusMap: {[key: number]: any} = {
  1: {value: '是', color: 'blue'},
  0: {value: '否', color: 'red'},
  2: {value: '未知', color: null},
};

Html页面

html 复制代码

<ng-container *ngIf="statusMap[data?.realFiling] as realFiling">
	<nz-tag [nzColor]="realFiling?.color">{{realFiling?.value}}</nz-tag>
</ng-container>

关键点：

*ngIf as 的作用：判断 + 重命名

ng-container 不生成多余 DOM（对比 Vue 的）

Map数据可以定义更多的内容，例如：

typescript 复制代码

statusMap = {
  1: { value: '是', color: 'blue', icon: 'check-circle', bgColor: '#e6f7ff' }
};

最终目的：

节省页面多行*ngif判断代码

*ngif as可以避免多次statusMap $data?.realFiling$ 取值