Faire en sorte que l'option et la sélection du tapis aient une interface utilisateur différente.

Question

J'ai un menu déroulant dans lequel j'indique le code du pays pour le numéro de téléphone. Actuellement, je veux que l'élément sélectionné ne contienne que l'image du drapeau ou le code. Et que la liste déroulante contienne l'image, le code du pays et le nom du pays.

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

C'est le code que j'écris. J'ai également l'image de l'interface utilisateur actuelle. Elles sont jointes ci-dessous.

Je souhaite que l'élément sélectionné ressemble à l'image ci-dessous. Je ne sais pas ce que je dois changer pour que l'élément sélectionné soit affiché avec seulement l'image.

Answer 1

Essayez d'ajouter <mat-select-trigger> :

    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>

Votre code serait le suivant :

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <!-- Add mat-select-trigger here start -->
    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>
     <!-- Add mat-select-trigger here end -->
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

Et félicitations pour une question très bien formée !