垫选择显示的值不同于垫选择的值

Question

我有一个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>

我想做的是打开对话框时将显示对象键：object value-

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

很好，但是当我选择该选项时，它应该仅将frequency.key显示到所选字段中，而不会发生。

我尝试使用Google谷歌搜索，但在这种情况下没有找到任何东西。任何帮助表示赞赏。

Answer 1

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

<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>

Answer 2

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

将您的值设置为 frequency.key

[value]="frequency.key"

然后使用<mat-select-trigger显示frequency.value来自formControl

<mat-select-trigger>
      {{frequency.value}}
    </mat-select-trigger>

Stackblitz

https://stackblitz.com/edit/angular-wxv1wv?embed=1&file=app/select-custom-trigger-example.html