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傳遞給target方法，以便區分兩種情況。

為了使更改生效，您需要進行以下更改：

在您的組件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);
    }
}

---

這是基於Material文檔示例的PLUNKER DEMO 。 有關這些更改的文檔需要更加清楚。