mat-选择 在具有 800 个选项的选中中超出的最大调用堆栈大小

Question

我正在使用mat-select来填充下拉列表中的对象数组。有一个选项可以通过单击ALL来选择和取消选择所有值。为此，我将清空与其关联的窗体控件，并用于选择全部，使用所有 ID 填充窗体控件。对于小数据，它工作正常。对于超过800的数据，当我在取消选择al时清空表单控件时，它会抛出一个错误（在安全订阅者.push.中超过了最大调用堆栈大小。/node_modules/rxjs/_esm5/内部/订阅者.js.安全订阅者.js./node_modules/rxjs/_esm5/内部/订阅者.js安全订阅者下一个 （订阅者.js：130）

组件.html

 <mat-select [formControl]="courseFormControl" multiple aria-label="Course Name"
          [(ngModel)]="selectedCourseIds">
<mat-option *ngFor="let course of courseList"
           (onSelectionChange)="onCourseSelect($event,courseFormControl)">
            {{course.courseName}}
          </mat-option>
</mat-select>

组件.ts

 onCourseSelect(event, form) {
    if(event.isUserInput) {
  let listCourseId =  [];
//data contains the total list
              data.map((val,ind) => {
                if(val.selected === true){
                  listCourseId.push(val.courseId)
                }
              });
          this.selectedCourseIds = listCourseId;

          this.courseFormControl.setValue(listCourseId);
}

取消全部选择时出现错误

core.js:15724错误范围错误:SafeSubscriber.push超过了最大调用堆栈大小../node _ modules/rxjs/_ es M5/internal/subscriber . js . safe subscriber . _ _ tryOrUnsub(subscriber . js:200)../node _ modules/rxjs/_ es M5/internal/subscriber . js . safe subscriber . next(subscriber . js:130)at subscriber . push../node _ modules/rxjs/_ es M5/internal/subscriber . js . subscriber . _ next(subscriber . js:76)at subscriber . push..EventEmitter.push上的/node _ modules/rxjs/_ es M5/internal/subscriber . js . subscriber . next(subscriber . js:53)..EventEmitter.push上的/node _ modules/rxjs/_ es M5/internal/subject . js . subject . next(subject . js:47)../node _ modules/@ angular/core/Fe sm5/core . js . event emitter . emit(core . js:13499)../node _ modules/@ angular/material/es M5/core . es5 . js . ma option . _ emitSelectionChangeEvent(core . es5 . js:2803)at ma option . push../node _ modules/@ angular/material/es M5/core . es5 . js . ma option . deselect(core . es5 . js:2595)

Answer 1

问题是我们什么时候直接给mat-select组件赋值。因此，与其将值直接推入formControl，不如使用mat-select API来取消选择该选项。

请尝试以下操作：

组件.html

<mat-select [formControl]="courseFormControl" multiple aria-label="Course Name" [(ngModel)]="selectedCourseIds" #matSelect>
  <mat-option *ngFor="let course of courseList" (onSelectionChange)="onCourseSelect($event, courseFormControl)">
    {{ course.courseName }}
  </mat-option>
</mat-select>

组件.ts

@ViewChild('matSelect') matSelect;

deSelectAll(){
  this.matSelect.options.forEach((x) => {
      x.deselect();
  });
}