Angular：如何在HTML中将int转为string匹配mat-select的ngModel？

当然可以在Angular的HTML模板里直接处理数字转字符串的需求，这样确实能把类型匹配的逻辑放在视图层，让组件类更干净。给你几个实用的方法：

方法1：直接调用toString()转换选项值 #

如果你的选项数据里的ID是数字类型，而需要绑定的模型值是字符串类型（比如对应"Helium"的ID是数字2，但模型里存的是"2"），直接在mat-option的[value]属性里把数字转成字符串即可：

<mat-select [(ngModel)]="selectedGasId">
  <mat-option *ngFor="let gas of gasList" [value]="gas.id.toString()">
    {{gas.name}}
  </mat-option>
</mat-select>

这样每个选项的value都会被转换成字符串类型，和你的模型值就能完美匹配，mat-select也能正确显示"Helium"选项了。

方法2：用字符串拼接快速转换 #

如果你觉得toString()写起来有点繁琐，也可以利用JavaScript的类型隐式转换，通过数字加空字符串的方式快速转成字符串，效果完全一样：

<mat-option *ngFor="let gas of gasList" [value]="gas.id + ''">
  {{gas.name}}
</mat-option>

方法3：双向绑定中的双向类型转换（模型为数字时） #

反过来，如果你的selectedGasId是数字类型，但选项的value是字符串，也可以在模板里处理双向转换：

<mat-select 
  [ngModel]="selectedGasId.toString()" 
  (ngModelChange)="selectedGasId = $event ? parseInt($event, 10) : null"
>
  <mat-option *ngFor="let gas of gasList" [value]="gas.id">
    {{gas.name}}
  </mat-option>
</mat-select>

这里把ngModel转成字符串匹配选项的value，当用户选择新选项时，再把字符串转回数字赋值给模型，兼顾了视图层的匹配和模型层的类型正确性。

这些方法都能帮你把类型转换逻辑留在HTML模板中，避免在.ts文件里额外写判断或转换代码，让组件逻辑更简洁清晰。

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