mdOption 的 (onSelectChange) 输出总是通过列表中的第一项

Question

我正在为 Angular 4 (4.3.4) 使用 Angular Material，我需要连接到选择事件以清除输入并将对象存储在单独的列表中。但是有一个问题：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) 
}

Answer 1

通过 onSelectionChange 事件，可以区分项目何时被选中或未被选中。您需要将 $event 传递给目标方法以区分这两种情况。

为了使您的更改生效，您需要进行以下更改：

In your component 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>

... and in your component.ts, change the method to following:

AddRole(event: MdOptionSelectionChange, role: Role) {  
    if (event.source.selected) {
        this.selectedList.push(role);
    }
}

这是一个基于 Material 文档示例的 PLUNKER DEMO。文档需要更清楚地说明这些更改。

mdOption 的 (onSelectChange) 输出总是通过列表中的第一项

(onSelectChange) output for mdOption ALWAYS gets passed first item in list

typescript

angular-material

md-autocomplete

angular-material2

angular