Mat selection List does not store all values selected

2
votes

I have a nested json to select multiple services for appointment creation. I have implemented mat selection list. The selection list stores the values of only one group, if any values from second group is selected earlier values are removed. Could not understand where it is wrong?

Below is the plunker : https://stackblitz.com/edit/material-selection-list-5-0-0-pod6hb

I expect the output to be [1,2,3,4] in selected values when all options are selected.

At present its only [1,2] or [3,4]

Thanks in advance.

2
angular
because you're iterating servicesList and the [formControl] ="service" is in that loop. So you're just overriding the same reference. – alphapilgrim

2 Answers

1
votes

The problem is your ngFor, the div should be inside de mat-selection-list not outside.

Use this code in your app.component.html

<div>
    Selected: {{ service.value | json }}
</div>
<div><label>Select services</label>
    <mat-selection-list #list [formControl] ="service">
      <div *ngFor= "let group of servicesList">
        {{group.serviceGroupName}}
                <mat-list-option *ngFor="let services of group.services" [value]="services.serviceId">
                    <div >
                        <div class="col-4" style="font-size: 12px"> {{services.serviceName}}</div>
                        <div class="col-4"  style="font-size: 12px"> {{services.defaultDuration}}</div>
                        <div class="col-4"  style="font-size: 12px"> {{services.price | currency}}</div>
                    </div>
                </mat-list-option>
      </div>        
  </mat-selection-list>
</div>
0
votes

I think that's because you are rendering two mat-selection-list elements with the same formControl, thus overriding the value of the other each time you edit something.

You should flatten your nested array into a simple one dimensional array. e.g with 

const flattendServiceList = servicesList.reduce((result, current) => (result.concat(current.services)), []))

Cheers Chris