角质材料。如何用图标创建md-select?

时间:2017-05-27 16:11:02

标签: angular angular-material

我在md-option中添加了图标,我希望用所选语言查看它。 这是我的代码

<md-select id="countryString" name="countryString"   [(ngModel)]="selectedCountry" >
          <md-option [value]="'en'">
            <img src="../../assets/images/icons/en.png" />Англійська</md-option>
          <md-option [value]="'ua'">
            <img src="../../assets/images/icons/ukr.png" />Українська</md-option>
          <md-option [value]="'ru'">
            <img src="../../assets/images/icons/ru.png" />Російська</md-option>
        </md-select>

我无法在这里向我展示我的问题:https://github.com/angular/material/issues/10694

1 个答案:

答案 0 :(得分:1)

您应该创建一个容器元素,其中img元素具有条件src属性。

<!-- only show when the user has selected a value -->
<div *ngIf="selectedCountry">
    <img src="../../assets/images/icons/{{selectedCountry}}.png"/>
</div>

<!-- your select element -->
<md-select ...

您可能需要将这些元素包装在flex容器中或使用float。