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

我在用电话。我可以看到图标，当我点击选择器，但问题是当我选择一个选项，它只显示值，而不是图标

此时代码正在重写

删除

法拉利'}

但是它以纯文本的形式加载html，在被选中后不会显示图像

这是它在选择一个选项后显示的内容。它删除图像，只显示

viewValue

更新（在md菜单beta.8旁边显示图标）：

您可以从所选菜单项中放置一个单独的

。请注意，
值
需要与整个对象绑定，而不仅仅是对象属性

html:


原件：

使用
[src]=“bodyStyle.icon”
而不是
src=“{{bodyStyle.icon}}”

我建议对
alt=“{{bodyStyle.viewValue}}”
也这样做。更改为
[alt]=“bodyStyle.viewValue”
这是一个在黑暗中拍摄的镜头，但请尝试

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完全一样。。。我需要的是在被选择后显示图标。我更新了问题，我尝试了一些方法，但没有成功。正如威尔所说，material2没有一种简单的方法显示所选选项的图像。但是，我为你创造了一个工作环境。再次检查，让我知道它是否对你有效…这解决了我的问题，你所做的很有意义。。我不知道为什么它看起来像你的plunkr不工作它改变了文字，但不是图像。。。我更改了lorempixel图像，效果很好。如果你能用plunkr代码做出一个新的答案，我会把它标记为一个解决方案。。希望它能帮助其他人，因为它解决了你的问题。我已经更新了答案。另外，我想指出的是，图像没有改变，因为它们都有相同的图像
src
。我已经用不同的
src
为每个项目更新了plunker，现在每个选项都会更改。我尝试了这个选项。问题是在选择一个选项后，它显示的是值，而不是图像。有一个打开的PR可以简化这一过程。我不确定如果没有组件工厂和一些骗子，这是不可能的。我一直在尝试如何在中传递图像，因为这就是它所选择的。让我检查你的链接。谢谢
  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/" }
  ];

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

<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;
  }
}

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