mat-select显示不同于mat-options选定值的值
mat-select显示不同于mat-options选定值的值
提问于 2019-03-15 01:38:36
我有一个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 key : object value-
<span>{{frequency.key }} : {{ frequency.abbriviation}}</span>
这很好，但当我选择选项时，它应该只显示frequency.key到选定的字段，这是不会发生的。
我试着用谷歌搜索，但没有找到任何关于这个案例的信息。任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2019-03-15 04:07:16
您可以执行以下操作来完成此操作。
将值设置为frequency.key
[value]="frequency.key"然后使用<mat-select-trigger显示formControl中的frequency.value
<mat-select-trigger>
{{frequency.value}}
</mat-select-trigger>Stackblitz
https://stackblitz.com/edit/angular-wxv1wv?embed=1&file=app/select-custom-trigger-example.html
Stack Overflow用户
发布于 2019-03-15 04:09:17
您可以通过使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55168854
复制相关文章
相似问题