angular - 如何在 Angular 2/4 Material 设计选择组件上添加图像

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需要与整个对象绑定(bind)，而不仅仅是对象属性。

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> 

:

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"