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

Question

我正在使用 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) )

组件.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);
}

错误被抛出，在去掉所有

核心.js：15724 错误范围错误：超出最大调用堆栈大小 在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) 在订阅者.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js：76) 在订阅者.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js：53) at EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js：47) at 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)

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();
});
}