角度材质将图像放在<mat-select>的选定值上

Question

我在角度2项目中使用角度材料。 我想在mat-select的选定值中放置一个静态图像（html元素）。 但我没有找到解决方案。

有人能帮助我吗？

Answer 1

当涉及到这种或类似情况时，我这样做是：

<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的任何标签，并且它们都可以工作！

Answer 2

只需在<img>内添加<mat-option>标记即可。对于所选选项，请使用ngClass将图像设置为背景。您必须按选项使用一个类：

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

Answer 3

我建议在 <span> 和/或 <mat-select-trigger> 元素中放置一个 <mat-option>，然后按照 this answer 规定的方式将 html 绑定到它。

<mat-select>
  <mat-select-trigger>
    <span [innerHTML]="myHtmlWithImageTag"></span>
  </mat-select-trigger>
  <mat-option *ngFor="let item of items" [value]="item">
    <span [innerHTML]="myHtmlWithImageTag"></span>
  </mat-option>
</mat-select>