activeModal.close Angular TS出现问题

Question

请帮助解决关闭模式窗口的问题。我写了函数，但按钮什么都不做按钮关闭：

<button type="submit"
(click)="activeModal.close()"
class="btn btn-outline-danger">Закрыть
</button>

tS文件中的方法：

closeModal() {
this.activeModal.close();

}

完整HTML:

<button class="btn btn-outline-warning" (click)="openModal(NewRow)">Добавить запись в журнал</button>
<ng-template #NewRow>
<div class="modal-header">
<h4 class="modal-title">Новая запись</h4>
<!--   <button (click)="closeModal()" class="close" data-dismiss="modal"  >-->
<!-- <button type="button" class="close"  data-dismiss="modal">
<span aria-hidden="true">&times;</span>
</button>-->
</div>
<div class="modal-body">
<form role="form" #logbook="ngForm" novalidate (ngSubmit)="logbook.form.valid && onSubmit()">
<div class="form-group">
<label>Дата</label>
<input type="date" [(ngModel)]="newRow.date" data-date-format="yyyy-mm-dd" name="date" required="required"
class="form-control" id="date">
<label>Дисциплина</label>
<select name="subject1" required="required" [(ngModel)]="newRow.subjectId" class="form-control"
[ngModelOptions]="{ standalone: true }">
<option name="subject" required="required" [value]="subject.id"
*ngFor="let subject of subjects">{{subject.subject}}</option>
</select>
<label>Тип занятия</label>
<select name="type1" required [(ngModel)]="newRow.typeId" class="form-control"
[ngModelOptions]="{ standalone: true }">
<option name="type" required="required" [value]="typeOfClass.id"
*ngFor="let typeOfClass of typeOfClasses">{{typeOfClass.name}}</option>
</select>
<label>Количество часов</label>
<input required="required" type="number" name="hours" [(ngModel)]="newRow.hours" class="form-control"
id="hours">
</div>
<div class="modal-footer">
<button type="submit"
(click)="activeModal.close()"
class="btn btn-outline-danger">Закрыть
</button>
<button (click)="saveNewRow()" [disabled]="logbook.form.invalid" class="btn btn-outline-success">Добавить
</button>
</div>
</form>
</div>

</ng-template>

完整的TS文件：

import {Component, OnInit} from "@angular/core";
import {AuthService} from "../../services/auth.service";
import {TokenStorageService} from "../../services/token-storage.service";
import {NgbActiveModal, NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {SubjectService} from "../../services/subject.service";
import {TypeOfClassService} from "../../services/typeOfClass.service";
import {Subject} from "../../common/subject";
import {TypeOfClass} from "../../common/typeOfClass";
import {Subscription} from "rxjs";
import {Logbook} from "../../common/logbook";
import {LogbookService} from "../../services/logbook.service";
@Component({
selector: 'app-new-row',
templateUrl: './add_new_row.component.html',
styleUrls: ['./add_new_row.component.css']
})
export class AddNewRowComponent implements OnInit {
form: any = {};
isLoggedIn = false;
isLoginFailed = false;
errorMessage = '';
roles: string[] = [];
subjects: Subject[];
typeOfClasses: TypeOfClass[];
public newRow: Logbook = new Logbook();
closeResult = '';
private subscriptions: Subscription[] = [];
constructor(private authService: AuthService,
private tokenStorage: TokenStorageService,
private modalService: NgbModal,
private activeModal: NgbActiveModal,
private subjectService: SubjectService,
private logbookService: LogbookService,
private typeOfClassService: TypeOfClassService) {
}
ngOnInit() {
this.loadAllTypes(), this.loadAllSubjects();
if (this.tokenStorage.getToken()) {
this.isLoggedIn = true;
this.roles = this.tokenStorage.getUser().roles;
}
}
onSubmit() {
this.authService.login(this.form).subscribe(
data => {
this.tokenStorage.saveToken(data.accessToken);
this.tokenStorage.saveUser(data);
this.isLoginFailed = false;
this.isLoggedIn = true;
this.roles = this.tokenStorage.getUser().roles;
this.reloadPage();
},
err => {
this.errorMessage = err.error.message;
this.isLoginFailed = true;
}
);
}

openModal(template) {
this.modalService.open(template);
}

closeModal() {
this.activeModal.close();
}
saveNewRow() {
this.subscriptions.push(this.logbookService.add(this.newRow).subscribe(() => {
this.newRow = new Logbook();
this.reloadPage();
}))
}
private loadAllTypes(): void {
this.subscriptions.push(this.typeOfClassService.getAllTypes().subscribe(type => {
this.typeOfClasses = type as TypeOfClass[];
}))
}
private loadAllSubjects() {
this.subscriptions.push(this.subjectService.getAllSubjects().subscribe(subject => {
this.subjects = subject as Subject[];
}))
}
reloadPage() {
window.location.reload();
}
}

Answer 1

查找解决方案。使用模式服务，不要忘记说明原因。(点击(="；modalService.desponseAll("交叉点击"("；

Answer 2

模式服务通常会返回一个ModalReference，在您的情况下，它就是this.activeModal。您尝试使用ModalReference，但它没有分配到任何位置？

我的猜测：

更改此项：

openModal(template) {
this.modalService.open(template);
}

到此：

openModal(template) {
this.activeModal = this.modalService.open(template);
}