在我的 Angular 7 App I'am中使用component MAT-SELECT Angular材料的反应形式。
视图看起来像这样:
<mat-form-field class="col-md-3" color="warn">
<mat-select placeholder="Selectionner la boutique"
id="libelleShop"
[(value)]="selectedlibelleShopoValue"
ngDefaultControl
formControlName="libelleShop"
(selectionChange)="onShopSelectionChanged($event)">
<mat-option *ngFor="let shop of shopsList"
[value]="shop">
{{shop.storeName}}
</mat-option>
</mat-select>
MD数据如下:
shopsList= [
{
'edoId': '2119',
'storeName': 'AIX LES BAINS'
},
{
'edoId': '2123',
'storeName': 'ANNEMASSE'
},
{
'edoId': '2460',
'storeName': 'ALENCON'
},
{
'edoId': '2478',
'storeName': 'Grand Evreux Carrefour'
},
{
'edoId': '2632',
'storeName': 'DESTRELAND'
}
]
第一次加载后,成功的下拉列表中的选项成功,我有一个按钮可在单击时强制垫子选择值。
我已经尝试过:
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}
不幸的是,似乎没有设置我的数据。
任何想法??
您需要在垫子式输入上使用comparewith函数。
示例:
<select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
一个旧问题...您可以使用MAT-SELECT和PATCH值的triggerValue
实现此目标。
<mat-form-field class="full-width" appearance="fill">
<mat-select #level formControlName="level">
<mat-option value="Native Speaker">Native Speaker</mat-option>
<mat-option value="Highly Proficient">Highly Proficient</mat-option>
<mat-option value="Very Good Command">Very Good Command</mat-option>
</mat-select>
</mat-form-field>
使用以上,您现在可以在模板中获取值。
<div *ngIf="level.triggerValue && (level.triggerValue).length; else notSpecifiedDate" class="text-muted"
fxFlex="100">{{level.triggerValue}}</div>
<ng-template #notSpecifiedDate>
<div class="text-muted" fxFlex="100">
{{'Not Specified' | translate}}
</div>
</ng-template>
使用以下方式: -
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({
libelleShop: shopObjToDisplay
});
}