Javascript 在md菜单项上绑定值,单击Angular2材质设计
给定以下代码,我如何分别将单击所选选项绑定到Javascript 在md菜单项上绑定值,单击Angular2材质设计,javascript,angular,material-design,Javascript,Angular,Material Design,给定以下代码,我如何分别将单击所选选项绑定到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 cl
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>
评论
{{option.name}
您选择的选项:
{{selectedOption.name}:{{selectedOption.value}
您可以使用按钮上的单击事件来设置选择选项
:
<div *ngFor="let option of options">
<button md-menu-item (click)="selectedOption = option">
{{option.name}}
</button>
</div>
<p>{{selectedOption?.name}}: {{selectedOption?.value}}</p>
{{option.name}
{{selectedOption?.name}}:{{{selectedOption?.value}
请注意?
elvis运算符。这用于在尚未定义selectedOption
时防止模板错误读取属性