在 md-menu-item 上绑定值单击 Angular2 Material Design答案

【问题标题】：Bind value on md-menu-item click Angular2 Material Design在 md-menu-item 上绑定值单击 Angular2 Material Design
【发布时间】：2017-03-28 16:52:51
【问题描述】：

鉴于以下代码，我将如何在单击我选择的选项时分别绑定到 selectedOption.name 和 selectedOption.value？

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  options = [
    {
      name: 'test1',
      value: "This is test1's value"
    },
    {
      name: 'test2',
      value: "This is test2's value"
    },
    {
      name: 'test3',
      value: "This is test3's value"
    }
  ]
}

app.component.html：

<button md-icon-button [md-menu-trigger-for]="menu">
  <md-icon>comment</md-icon>
</button>
<md-menu #menu="mdMenu">
  <div *ngFor="let option of options">
    <button md-menu-item>{{option.name}}</button>
  </div>
</md-menu>

<h3>Your selected option: </h3>
<p>{{selectedOption.name}}: {{selectedOption.value}}</p>

【问题讨论】：

标签： javascript angular material-design

【解决方案1】：

您可以使用按钮上的点击事件来设置selectedOption：

<div *ngFor="let option of options">
  <button md-menu-item (click)="selectedOption = option">
    {{option.name}}
  </button>
</div>

<p>{{selectedOption?.name}}: {{selectedOption?.value}}</p>

注意? elvis 运算符。这用于防止模板错误在 selectedOption 尚未定义时读取属性。

【讨论】：