角度材质 mat-select 中多选模式下值必须是数组

Question

我正在使用角形材料垫选择组件。

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

打字稿 sensitiveList : string[] = [ '无', '敏感']; 对于（变量我= 0;我

为什么运行代码会出现错误

Value must be an array in multiple-selection mode

Answer 1

您有一个多重选择，它提供数据数组，并且您的元素属性“敏感”不是数组！将属性“敏感”更改为字符串数组或从垫选择中删除“多个”以获取单个值，您的问题应该得到解决

Answer 2

我遇到了这个问题。我作为数组传递，但仍然收到错误。对我来说，问题是我为 formContol 设置了默认值。 例如：

myFormControl: new FormControl(1);

问题是默认值应该是一个数组。 因此，要为具有

mat-select

属性的

multiple

设置默认值，您应该执行以下操作：

myFormControl: new FormControl([1]);

这样做之后问题就解决了。

Answer 3

在 Jasmine 单元测试中也可能会遇到此错误。如果您有

selectionChange

事件的侦听器：

<mat-select #select [formControl]="form.control" (selectionChange)="selectionChangeHandler($event)" ngDefaultControl multiple>
     <!-- content -->
</mat-select>

...并使用模拟参数对其进行单元测试，该参数必须作为数组传入。例如，这里将抛出错误消息：

const select = fixture.debugElement.queryAll(By.css('mat-select'))[0];
select.triggerEventHandler('selectionChange', {value: '123'});

但不在这里，因为这个参数是一个数组：

const select = fixture.debugElement.queryAll(By.css('mat-select'))[0];
select.triggerEventHandler('selectionChange', [{value: 123'}]);