如何给 mat-select 选项一个动态对象键作为值？答案

【问题标题】：how to give mat-select option a dynamic object key as a value?如何给 mat-select 选项一个动态对象键作为值？
【发布时间】：2026-01-28 03:25:01
【问题描述】：

我想将一个动态对象传递给 mat-select 组件并传递 object 的输入键，这应该通过 mat-option 在[value] 中使用。这里垫选择

<mat-select [placeholder]="field.label" [formControlName]="field.name">
<mat-option *ngFor="let item of field.options" [value]="item">{{item}}</mat-option>
</mat-select>

代替 item 它应该是动态对象键。例如如果我通过这个数组喜欢迭代

[{name:'hassa',id:1}]

for 循环，我想通过 id 在 [value]="item" 中使用 mat-option 但应该是动态对象可以改变的

【问题讨论】：

标签： angular angular-material

【解决方案1】：

你可以使用一些类似的

//in .ts
key="id"
text="name"

<mat-option *ngFor="let item of field.options" 
      [value]="item[key]">
   {{item[text]}}
</mat-option>

如果您想制作自定义组件来管理复选框列表，请查看this SO question

【讨论】：

它会给出 key 的值而不是我认为的 key

【解决方案2】：

有点晚了，但您可以使用键值管道 - 类似于此答案：https://*.com/a/51491848/1029688

<mat-select formControlName="example">
    <mat-option *ngFor="let item of testObject | keyvalue" [value]="item.key">
        Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
    </mat-option>
</mat-select>

【讨论】：