Currently, I am utilizing Angular Material within Angular 4 (version 4.3.4) and have encountered an issue with the selection event. Specifically, I am attempting to clear the input and then store the selected object in a separate list upon selection. Strangely, the onSelectChange output consistently passes the first item as the parameter. Any insights on what might be causing this behavior?
Below is my template setup:
<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>
Furthermore, here is the function AddRole that I am using:
AddRole(role: Role)
{
// Interestingly, role always ends up being the initial role in the list regardless of which option is clicked.
this.selectedList.push(role)
}