(onSelectChange) mdOption的输出总是在列表中传递第一项
(onSelectChange) mdOption的输出总是在列表中传递第一项
提问于 2017-08-13 20:37:39
我使用角材料的角度4 (4.3.4)，我需要挂钩到选择事件，以清除输入和存储在一个单独的列表中的对象。但是有一个问题: onSelectChange输出总是获得第一个项作为参数！到底怎么回事？
这是我的模板：
<md-autocomplete [displayWith]="displayRole" #auto="mdAutocomplete">
<md-option
*ngFor="let role of roles | acrole: roleField.value | slice:0:4; let i=index;"
[value]="role"
(onSelectionChange)="AddRole(role)" >
<div class="label">
{{role.label}}
</div>
</md-option>
</md-autocomplete>这是我的AddRole函数：
AddRole(role: Role)
{
// role is always the first role in the list, no matter which option I clicked on.
this.selectedList.push(role)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-17 09:08:34
使用onSelectionChange事件，可以区分项目是选择还是取消选择。您需要将一个$event传递给目标方法，以便区分这两种情况。
为了使您的更改生效，需要进行以下更改：
在组件html中：
<md-autocomplete [displayWith]="displayRole" #auto="mdAutocomplete">
<md-option
*ngFor="let role of roles | acrole: roleField.value | slice:0:4; let i=index;"
[value]="role"
(onSelectionChange)="AddRole($event, role)">
<div class="label">
{{role.label}}
</div>
</md-option>
</md-autocomplete>..。在您的component.ts中，将方法更改为：
AddRole(event: MdOptionSelectionChange, role: Role) {
if (event.source.selected) {
this.selectedList.push(role);
}
}下面是一个基于材料文档示例的PLUNKER DEMO。文档需要更清楚地说明这些更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45664699
复制相关文章
相似问题
腾讯云开发者
