angular-material - 垫选择显示的值与垫选择选择的值不同

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

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

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