Value must be an array in multiple-selection mode in angular material mat-select

Question

I am using angular material mat-select component.

        <mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort >

              <ng-container matColumnDef="sensitive">
                <mat-header-cell class="table-header header-p" *matHeaderCellDef> <b>sensitive</b> </mat-header-cell>
                <mat-cell class="table-content context-position "  *matCellDef="let element"  >
                  <mat-select placeholder="sensitive"  multiple [(ngModel)]="element.sensitive" >
                    <mat-option *ngFor="let type of sensitiveList" [value]="type">{{type}}</mat-option>
                  </mat-select>
                </mat-cell>
              </ng-container>

              <mat-header-row class="table-header-row" *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row  [ngClass]="((i%2) == 1) ? 'table-content-row-single' : 'table-content-row-double'"  *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

typescript sensitiveList : string[] = [ 'none', 'sensitive']; for(var i=0;i

why running the code gives me an error

Value must be an array in multiple-selection mode

Solution

You have a multiple select which is serving an array of data and your elements attribute 'sensitive' isn't an array! Change your attribute 'sensitive' to a string array or remove the 'multiple' from your mat-select to get a single value and your problem should be solved

Comments

[wentjun]

Can I see how does your sensitiveList look like? Can you provide an example?

[user824624]

@wentjun just add it, it is just a array

[Enrico]

I don't get it, can you give an example?

[JuNe]

element.sensitive is a NOT an array but databinding in this case requires an array here because the select has the 'multiple' directive