Angular 11 - 模態方法檢查數組中的值並返回 false，即使構造函數加載了數組

Question

我有一個表格，注冊了一組名為“區域”的新課程。 表單有一個按鈕，調用模態 window 並允許用戶 select 所需的課程並將它們添加到表單列表中。

最初的 function 似乎工作正常。 當我在 select 一個課程對話框中，課程被添加到父組件數組中。 然后我檢查是否已經選擇了課程，以便顯示取消選擇課程的按鈕。

問題出在我關閉模態對話框並再次打開它時。 “isCourseSelected”方法（檢查“課程”object 是否在數組內）不起作用。 即使構造函數從 modalService 的 initialState 填充數組“modalSelectedCourses”，它也會返回 false。

這是有問題的代碼：

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

另外，這里是模態模板“courses-list-modal.component”的代碼：

<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”成為 static 變量。 它不起作用，因為“isCourseSelected”方法中的 this.modalSelectedCourses 在初始化時始終為空。 因此，創建變量 static，它將保留 memory 上的數據並檢查實際數組值。