在菜单项上绑定值,点击Angular2材质设计
Bind value on md-menu-item click Angular2 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 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>
您可以使用按钮上的点击事件来设置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
还没有定义时,用来防止模板错误读取属性
相关文章:
- 分派点击事件并保留击键修饰符
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- jquery点击函数select&取消选择
- ExtJS 5用程序点击actioncolumn gridview
- 我可以获得相对于被点击元素的确切点击位置吗
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 对iPad上的点击事件反应缓慢
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 我应该使用Ng提交还是点击表格
- 手风琴可点击并悬停
- python-selenium-点击上升链接
- Javascript html每点击一次就会更改url
- 当我点击jsf中的primefaces命令按钮时,如何获得点击事件
- 如何使用Angular2在点击时切换选项卡和更改css类
- 在菜单项上绑定值,点击Angular2材质设计
- Angular2表单默认的输入值不会在初始点击时设置
- Angular2在非表单元素上点击Event
- 当点击提交按钮时,使用angular2从一个页面导航到另一个页面
- Angular2在点击时获取json格式的字符串
- Angular2指令修改点击处理