如何在Angular 2/4材质设计选择组件上添加图像

Question

我正在使用material angular select component。当我点击选择器时我可以看到图标，但问题是当我选择一个选项时它只显示值而不是图标。

目前代码正在重写<md-option>，删除<img>代码并添加{{bodyStyle.viewValue}}

app.component.html

<div class="form-control form-control--center">                 
 <md-select [(ngModel)]="selectedBodystyle" floatPlaceholder="never" name="bodyStyle">
    <md-option *ngFor="let bodyStyle of bodyStyles" [value]="bodyStyle.value">
        <img src="{{bodyStyle.icon}}" alt="{{bodyStyle.viewValue}}">
            {{bodyStyle.viewValue}}

    </md-option>
 </md-select>
</div>

app.component.ts

  selectedBodystyle: string;
  bodyStyles = [
    { value: 'Mercedez' , viewValue: 'Mercedez', icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'Ferrari'  , viewValue: 'Ferrari' , icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'BMW'      , viewValue: 'BMW'     , icon: "http://lorempixel.com/50/50/transport/" }
  ];

更新

我尝试在viewValue属性中添加图片，如

{ value: 'Ferrari'  , viewValue: '<img src="http://lorempixel.com/50/50/transport/" alt="Ferrari">Ferrari' }

但是它以纯文本加载html，在选择后不会显示图像

这是它在选择一个选项后显示的内容，它删除了它只显示viewValue

中的内容的图像

Answer 1

更新（显示md-menu beta.8旁边的图标）：

您可以在<img>旁边放置一个单独的md-menu标记，并使用所选菜单项中的图片src。请注意，为此，value需要绑定整个对象，而不是仅绑定对象属性。

HTML：

<div class="form-control form-control--center">  
<i *ngIf="selectedIcon"><img [src]="selectedIcon" alt="selectedIcon" style="margin-bottom: -15px"></i>
 <md-select [(ngModel)]="selectedBodystyle" 
            floatPlaceholder="never" 
            name="bodyStyle"
            (change)="optionSelected($event)">
    <md-option *ngFor="let bodyStyle of bodyStyles" [value]="bodyStyle">
        <img [src]="bodyStyle.icon" [alt]="bodyStyle.viewValue">
            {{bodyStyle.viewValue}}
    </md-option>
 </md-select>
</div> 

TS：

export class SelectFormExample {
  selectedBodystyle: string;
  selectedIcon;
  bodyStyles = [
    { value: 'Mercedez' , viewValue: 'Mercedez', icon: "http://lorempixel.com/40/40/transport/" },
    { value: 'Ferrari'  , viewValue: 'Ferrari' , icon: "http://lorempixel.com/30/30/transport/" },
    { value: 'BMW'      , viewValue: 'BMW'     , icon: "http://lorempixel.com/50/50/transport/" }
  ];

  optionSelected(event){
    // console.log(event.value.icon);
    this.selectedIcon = event.value.icon;
  }
}

Plunker demo

<强>原始

使用[src]="bodyStyle.icon"代替src="{{bodyStyle.icon}}"

我建议对alt="{{bodyStyle.viewValue}}"做同样的事情。更改为[alt]="bodyStyle.viewValue"

Answer 2

这是在黑暗中拍摄但尝试

<img [src]="bodyStyle.icon"...