角材料将图像放置在< mat-select>的选定值上. [英] Angular material put image on selected value of <mat-select>

问题描述

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

有人可以帮我吗?

I am using angular material in an angular 2 project. I want to put a static image (html element) in the selected value of mat-select. But i didn't find a solution.

Can someone help me?

推荐答案

只需在<mat-option>内添加<img>标记.对于选择的选项，使用ngClass将图像设置为背景.您必须通过一个选项使用一个类:

By simply adding <img> tag inside <mat-option>. For the selected option use ngClass to set the image as background. You must use one class by 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
}

演示

DEMO

这篇关于角材料将图像放置在< mat-select>的选定值上.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！