Angular 11-Modal方法检查数组中的值，即使构造函数加载数组也会返回false

Question

我有一个表单，它注册了一组名为"areas"的新课程。该表单有一个按钮，可以调用模式窗口，并允许用户选择所需的课程并将其添加到表单列表中。

初始功能似乎运行良好。当我在对话框中选择一个课程时，该课程将添加到父组件阵列中。然后我检查课程是否已经选择，以便显示取消选择课程的按钮。

当我关闭模式对话框并再次打开它时，问题就出现了。"；isCourseSelected；方法(检查"course"对象是否在数组内(不起作用。即使构造函数填充数组"，它也返回false；模式选择课程"；从模式服务的initialState。

以下是出现问题的代码：

import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FormControl, FormGroup } from '@angular/forms';
import { FileUploadValidators } from '@iplab/ngx-file-upload';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { isThisTypeNode } from 'typescript';
import { Course } from '../../../../shared/models/course.model';
@Component({
selector: 'app-area-form',
templateUrl: './area-form.component.html',
styleUrls: ['./area-form.component.scss'],
})
export class AreaFormComponent implements OnInit {
public selectedCourses: Course[];
bsModalRef?: BsModalRef;
public animation: boolean = false;
public multiple: boolean = false;
private filesControl = new FormControl(null, FileUploadValidators.filesLimit(2));
public demoForm = new FormGroup({
files: this.filesControl
});
constructor(public modalService: BsModalService, private cd: ChangeDetectorRef) {
}
get staticSelectedAreas() {
return this.selectedCourses;
}
public processSelection(course: Course) {
if (this.selectedCourses.indexOf(course) !== -1) {
this.selectedCourses = this.selectedCourses.filter((curCourse) => course.id !== curCourse.id);
} else {
this.selectedCourses.push(course);
}
this.cd.markForCheck();
}
public toggleStatus(): void {
this.filesControl.disabled ? this.filesControl.enable() : this.filesControl.disable();
}
public toggleMultiple() {
this.multiple = !this.multiple;
}
public clear(): void {
this.filesControl.setValue([]);
}
ngOnInit(): void {
this.selectedCourses = [];
}
openModalWithComponent() {
const initialState = {
modalSelectedCourses: this.selectedCourses
};
this.bsModalRef = this.modalService.show(CoursesModalComponent, {initialState, class: 'modal-lg'});
this.bsModalRef.content.notifyParent.subscribe((e) => {
this.processSelection(e);
});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
@Component({
selector: 'app-search-courses-list',
templateUrl: './courses-list-modal.component.html',
styleUrls: ['./area-form.component.scss'],
})
export class CoursesModalComponent implements OnInit {
@Output() notifyParent = new EventEmitter<Course>();
title?: string = 'Buscar Cursos';
closeBtnName?: string;
courses: Course[] = [];
modalSelectedCourses: Course[] = [];
constructor(public bsModalRef: BsModalRef, firestore: AngularFirestore, public modalService: BsModalService) {
firestore.collection('courses').valueChanges({idField: 'id'}).forEach((course) => {
course.forEach((tempCourse) => {
const newCourse: Course = new Course().deserialize(tempCourse);
this.courses.push(newCourse);
});
});
this.modalSelectedCourses = this.modalService.config.initialState['modalSelectedCourses'];
console.log(this.modalSelectedCourses);
}
public addSelectedCourse(course: Course) {
this.notifyParent.emit(course);
this.modalSelectedCourses.push(course);
}
public removeSelectedCourse(course: Course) {
this.notifyParent.emit(course);
this.modalSelectedCourses = this.modalSelectedCourses.filter((curCourse) => course.id !== curCourse.id);
}
public isCourseSelected(course: Course) {
if (this.modalSelectedCourses.indexOf(course) !== -1) {
return true;
} else {
return false;
}
}
ngOnInit() {
}
}

此外，这里是模态模板"的代码；课程列表模态组件"：

<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true" class="visually-hidden">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-8">
<div class="search-course-div">
<input type="text" class="form-control search-course-textfield" name="search" placeholder="Buscar curso"><i class="fa fa-search"></i>
</div>
</div>
<div class="col-sm-4">
<button class="btn btn-primary">+ Crear curso</button>
</div>
</div>
<div class="courses-table">
<table class="table table-striped">
<thead>
<tr>
<th>Nombre del curso</th>
<th>Cant. de lecciones</th>
<th></th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="courses; else noCourses">
<tr *ngFor="let course of courses">
<td>{{ course.name }}</td>
<td>##</td>
<td>
<ng-container *ngIf="isCourseSelected(course); else notSelectedTemplate">
<button (click)="removeSelectedCourse(course)" type="button" class="btn btn-primary">Asignado <i class="fa fa-check-circle"></i></button>
</ng-container>
<ng-template #notSelectedTemplate>
<button (click)="addSelectedCourse(course);" type="button" class="btn btn-outline-primary">Asignar</button>
</ng-template>
</td>
</tr>
</ng-container>
<ng-template #noCourses>
<tr>
<td colspan="3">No hay cursos disponibles</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
</div>

我不知道为什么第二次打开对话框时该方法返回false。

提前感谢您的支持！

Answer 1

我认为的解决方法是；selectedCourses"；静态变量。它不起作用，因为内部的this.modalSelectedCourses；isCourseSelected；方法在init上始终为空。因此，使变量为静态，它将保留内存中的数据并检查实际数组值。