Angular material mat select显示的值与mat options selected值不同

我有一个mat select下拉列表，在这里我通过我的frequencyArr对象循环

在ts中

frequencyArr = [
{key : "Once daily", abbriviation : '0-0-1'},
{key : "Twice daily", abbriviation : '1-0-1'},
{key : "Thrice daily", abbriviation : '1-1-1'},
{key : "Four times a day", abbriviation : '1-1-1-1'}
  ]

html格式的

<mat-select placeholder="frequency" formControlName="frequency" required>                             
    <mat-option *ngFor="let frequency of frequencyArr" [value]="frequency.abbriviation">
        <span>{{frequency.key }} : {{ frequency.abbriviation}}</span>
    </mat-option>
</mat-select>

{{frequency.key}}:{{frequency.abbriviation}

我试图做的是，当打开对话框时，它将显示对象键：对象值-

<span>{{frequency.key }} : {{ frequency.abbriviation}}</span>

{{frequency.key}:{{{frequency.abbriviation}

这很好，但是当我选择该选项时，它应该只显示frequency.key到所选字段，而这并没有发生

---

我试着在谷歌上搜索，但没有找到任何关于这个案子的信息。非常感谢您的帮助。

您可以执行以下操作来完成此任务

将您的值设置为

frequency.key

[value]="frequency.key"

---

然后使用

您可以通过使用mat select触发器和模板引用来实现，如下所示：

<mat-select placeholder="frequency" required #select>
  <mat-select-trigger>
    {{ select.value?.abbriviation }}
  </mat-select-trigger>
  <mat-option *ngFor="let frequency of frequencyArr" [value]="frequency">{{frequency.key }} : {{ frequency.abbriviation}}</mat-option>
</mat-select>


{{select.value？.abbriviation}
{{frequency.key}}:{{frequency.abbriviation}
这不起作用。在我的例子中，frequency是一个FormGroup元素，而不是FormControl。我不确定这是否是原因？你是正确的，请参阅修订版stackblitz<代码>{{myFormGroup.controls['frequency'].value}}

<mat-select placeholder="frequency" required #select>
  <mat-select-trigger>
    {{ select.value?.abbriviation }}
  </mat-select-trigger>
  <mat-option *ngFor="let frequency of frequencyArr" [value]="frequency">{{frequency.key }} : {{ frequency.abbriviation}}</mat-option>
</mat-select>