Angular中使用i18n翻译枚举键并绑定MatSelection的实现求助

1. 配置i18n翻译条目 #

在你的i18n语言文件中，为每个枚举键添加对应的翻译文本，示例如下：

• 中文翻译文件（zh-CN.json）：

{
  "logEvent.all": "全部",
  "logEvent.created": "已创建",
  "logEvent.modified": "已修改",
  "logEvent.delete": "已删除"
}

• 英文翻译文件（en.json）：

{
  "logEvent.all": "All",
  "logEvent.created": "Created",
  "logEvent.modified": "Modified",
  "logEvent.delete": "Deleted"
}

2. 将枚举转换为MatSelect可用的选项数组 #

在组件的ts文件中，编写代码把枚举转换为包含数字值和翻译标签的选项数组，同时利用i18n服务获取翻译文本：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; // 按实际使用的i18n库调整
import { LogEvent } from './path-to-your-enum';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  logEventOptions: { value: number; label: string }[] = [];
  selectedEvent: number = LogEvent.All; // 默认选中值

  constructor(private translate: TranslateService) {
    // 过滤枚举的反向映射，只保留数字值条目
    this.logEventOptions = Object.keys(LogEvent)
      .filter(key => !isNaN(Number(LogEvent[key as keyof typeof LogEvent])))
      .map(key => {
        const enumKey = key as keyof typeof LogEvent;
        return {
          value: LogEvent[enumKey],
          label: this.translate.instant(`logEvent.${key.toLowerCase()}`)
        };
      });
  }
}

如果i18n翻译是异步加载的，改用translate.get()订阅避免初始显示键名：

Object.keys(LogEvent)
  .filter(key => !isNaN(Number(LogEvent[key as keyof typeof LogEvent])))
  .forEach(key => {
    const enumKey = key as keyof typeof LogEvent;
    this.translate.get(`logEvent.${key.toLowerCase()}`).subscribe(label => {
      this.logEventOptions.push({
        value: LogEvent[enumKey],
        label
      });
    });
  });

3. 在模板中绑定MatSelect组件 #

在组件HTML模板里，使用mat-select和mat-option绑定选项数组与选中值：

<mat-form-field>
  <mat-label>日志事件类型</mat-label>
  <mat-select [(ngModel)]="selectedEvent">
    <mat-option *ngFor="let option of logEventOptions" [value]="option.value">
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

若使用响应式表单，替换为formControl即可：

<mat-select [formControl]="eventControl">
  <mat-option *ngFor="let option of logEventOptions" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

// 组件类中添加响应式表单控制
import { FormControl } from '@angular/forms';

eventControl = new FormControl(LogEvent.All);

关键注意点 #

• 确保[value]绑定的是枚举对应的数字值，而非字符串，保证选中值类型与枚举一致
• 枚举键转小写是为了匹配i18n文件中的命名规范，可根据实际调整键名对应规则

内容的提问来源于stack exchange，提问作者Amila