web-dev-qa-db-ja.com

Angularマテリアルは<mat-select>の選択した値に画像を置きます

angular angular 2プロジェクトでマテリアルを使用しています。mat-selectの選択した値に静的画像（html要素）を配置します。解決策が見つかりませんでした。

誰か助けてもらえますか？

htmlangularcss3angular-material
9
Mat

<img>内に<mat-option>タグを追加するだけです。選択したオプションでは、ngClassを使用して画像を背景として設定します。オプションで1つのクラスを使用する必要があります。

[〜＃〜] 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
}

[〜＃〜] demo [〜＃〜]

8
Vega

enter image description here

これまたは同様の状況になると、私はそれをしました：

<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>

もちろん、内部タグ<mat-select-trigger>と `はimgと同様に任意のタグにすることができ、それらは機能します!!

19
CisSasGot