Question

我正在使用Angular Material for Angular 4（4.3.4），我需要挂钩选择事件以清除输入并将对象存储在单独的列表中。但是有一个问题：onSelectChange输出ALWAYS获取第一个项目作为参数！发生了什么事？

这是我的模板：

<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) 
}

Answer 1

使用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。文档需要更清楚地了解这些变化。

（onSelectChange）mdOption的输出ALWAYS传递给列表中的第一项

1 个答案: