angular - (onSelectChange) output för mdOption får ALLTID det första objektet i listan

Jag använder Angular Material för Angular 4 (4.3.4) och jag behöver koppla in mig på val-händelsen för att rensa inputen och lagra objektet i en separat lista. Men det finns ett problem: onSelectChange-utgången får ALLTID det första objektet som parameter! Vad pågår?

Här är min mall:

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

Och här är min AddRole-funktion:

AddRole(role: Role)
{  
   // role is always the first role in the list, no matter which option I clicked on.
   this.selectedList.push(role) 
}

Svar #1

Med onSelectionChange-händelsen är det möjligt att skilja på när objektet är markerat eller avmarkerat. Du behöver skicka ett $event till målmetoden för att kunna skilja mellan de två fallen.

Här är de ändringar du behöver göra för att få dina ändringar att fungera:

I din komponent-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>

... och i din component.ts, ändra metoden till följande:

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

Här är en PLUNKER DEMO baserad på Material-dokumentationsexemplet. Dokumentationen behöver vara lite tydligare om dessa förändringar.