如何在 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 旁边显示图标）：

您可以在md-menu 旁边放置一个单独的<img> 标签，并使用所选菜单项中的图像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"...