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

Question

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

有人能帮我吗？

原文由 Mat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过简单地在 <mat-option> 中添加 <img> 标签。对于所选选项，使用 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
}

演示

原文由 Vega 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 <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，它们可以工作！！

原文由 CisSasGot 发布，翻译遵循 CC BY-SA 4.0 许可协议