web-dev-qa-db-fra.com

Angular place l'image sur la valeur sélectionnée de <mat-select>

J'utilise angular matériel dans un projet angular 2 projet. Je veux mettre une image statique (élément html) dans la valeur sélectionnée de mat-select. Mais je n'ai pas trouvé de solution.

Est-ce que quelqu'un peut m'aider?

htmlangularcss3angular-material
9
Mat

En ajoutant simplement <img> tag à l'intérieur <mat-option>. Pour l'option sélectionnée, utilisez ngClass pour définir l'image comme arrière-plan. Vous devez utiliser une classe par option:

[~ # ~] html [~ # ~] 

  <mat-select [(value)]="selected" [ngClass]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1
      <img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

    </mat-option>      
    <mat-option value="option2">Option 2
      <img with="10" height="10" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">

    </mat-option>

    <mat-option value="option3">Option 3</mat-option>
  </mat-select>

CSS: 

.option1{
  background:  url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg")  center / contain no-repeat;
  white-space: nowrap

}


.option2{
  background:  url("https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg")  center / contain no-repeat;
  white-space: nowrap;
  display:inline
}

DÉMO

8
Vega

enter image description here

en ce qui concerne cette situation ou une situation similaire, je l'ai fait que:

<mat-form-field>
     <mat-select [(value)]="selectedLanguage">
       <mat-select-trigger>
         <span class="flag-icon flag-icon-{{ selectedLanguage | lowercase}}"> </span>
       </mat-select-trigger>
       <mat-option *ngFor="let lang of Languages" [value]="lang">
         <span class="flag-icon flag-icon-{{ lang | lowercase}}"></span>
       </mat-option>
     </mat-select>
   </mat-form-field>

bien sûr, à l'intérieur des balises <mat-select-trigger> et `peuvent être aussi des tags img, et ils fonctionnent !!

19
CisSasGot