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

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>

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

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

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

我尝试使用Google谷歌搜索，但在此情况下未找到任何内容。任何帮助表示赞赏。

Answer 1

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

将您的值设置为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

Answer 2

您可以通过使用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>