Dans mon application Angular 7 , j'utilise le composant mat-select de matériau angulaire sous une forme réactive.
La vue ressemble à ceci :
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}
Les données Md sont les suivantes:
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'
}
]
Après le premier chargement, les options apparaissent dans la liste déroulante de sélection avec succès, et j'ai un bouton utilisé pour forcer la valeur de la sélection de tapis lorsque vous cliquez dessus.
J'ai essayé ceci:
<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>
Malheureusement, il semble que mes données ne soient pas définies.
Des idées ??
3 Réponses :
Vous devez utiliser la fonction compareWith sur votre tapis. sélectionnez l'entrée.
Exemple:
<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;
}
souhaite que Google Material l'incorpore dans la liste déroulante, au lieu de contourner le problème, merci de l'avoir spécifié
Quelle est la réponse officielle de Google Angular Material? compareWith ou triggerValue? ces deux semblent bons
Cela devrait certainement être la réponse acceptée. Elle est plus propre que la version triggerValue, et Angular Material a exposé l'entrée compareWith à utiliser à cette fin, tandis que triggerValue n'est qu'une simple propriété.
salut, cela n'émet cependant pas tout l'objet, y a-t-il quand même pour faire ça, question laissée ici stackoverflow.com/questions/60783901/...
Utilisez ceci: -
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({
libelleShop: shopObjToDisplay
});
}
Une vieille question ... vous pouvez y parvenir avec la triggerValue avec mat-select et patch value.
<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>
Avec ce qui précède, vous pouvez maintenant obtenir la valeur du modèle.
<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>
Quelle est la réponse officielle de Google Angular Material? compareWith ou triggerValue? ces deux semblent bons
aussi, quel est le nouveau deuxième paragraphe html? comment cette fusion est-elle corrélée au premier paragraphe html?
salut, cela n'émet cependant pas tout l'objet, y a-t-il quand même pour faire ça, question laissée ici stackoverflow.com/questions/60783901/...
this.myForm.patchValue ({'libelleShop': shopObjToDisplay.storeName});?Je pense qu'il doit faire référence à l'un des objets de votre
shopListque vous avez lié à votremat-select. Essayez:this.myForm.patchValue ({'libelleShop': this.shopList [2]});