md-menu-item上のバインド値クリックAngular2マテリアルデザイン

Question

以下のコードで、選択したオプションをクリックすると、それぞれ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> 

Answer 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がまだ定義されていないときに、テンプレートエラーによるプロパティの読み取りを防止するために使用されます。