mat-select 超过 800 多个选项的选择中的最大调用堆栈大小答案

【问题标题】：mat-select Maximum call stack size exceeded in select with 800+ optionsmat-select 超过 800 多个选项的选择中的最大调用堆栈大小
【发布时间】：2019-10-23 13:06:48
【问题描述】：

我正在使用 mat-select 在下拉列表中填充对象数组。有一个选项可以通过单击全部来选择和取消选择所有值。为此，我正在清空与之关联的表单控件并选择全部，用所有 id 填充表单控件。对于小数据，它的工作正常..对于超过 800 的数据，当我在取消选择 al 时清空表单控件时，它会引发错误（超出最大调用堆栈大小在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:200) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) )

component.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 错误 RangeError: 超出最大调用堆栈大小在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:200) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53) 在 EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) 在 EventEmitter.push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:13499) 在 MatOption.push../node_modules/@angular/material/esm5/core.es5.js.MatOption._emitSelectionChangeEvent (core.es5.js:2803) 在 MatOption.push../node_modules/@angular/material/esm5/core.es5.js.MatOption.deselect (core.es5.js:2595)

【问题讨论】：

欢迎来到 Stackoverflow。请修复拼写错误，并通过区分描述和错误详细信息来格式化描述，这样它会使您的问题更具可读性，并且也会增加获得好的答案的机会。（注意：我试图解决拼写和格式问题，但需要时间，因为有很多需要更正，所以我请求您更正这些问题。

标签： angular-material

【解决方案1】：

问题是当我们直接为 mat-select 组件赋值时。因此，不要将值直接推送到 formControl 中，而是使用 mat-select api 取消选择选项。

尝试以下方法：

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

component.ts

@ViewChild('matSelect') matSelect;

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

【讨论】：