无法关闭 ng-bootstrap 模态

Question

所以我有一个NgbModal，里面有一个表单，我想要实现的是在成功提交时关闭它。

这是我的模态组件：

@Component({
    selector: 'create-update-transaction',
    templateUrl: './CreateOrUpdateTransaction.html',
    providers: [AccountTransactionsService]
})
export class CreateOrUpdateTransactionComponent {
    closeResult: string;
    modalRef: NgbModalRef;

    @Input() transaction: Transaction = new Transaction();
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private modalService: NgbModal,
                private transactionsService: AccountTransactionsService) {}

    sendTransaction(): void{
        let localModalRef = this.modalRef;
        this.transactionsService.createOrUpdateTransaction(this.transaction, (isSuccessful)=>{
            if (isSuccessful) {
                this.onSubmit.emit();
                localModalRef.close(); //<--- The problem is here
            }
        });
    }

    open(content) {
        this.modalRef = this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }
}

我在尝试调用已保存的NgbModalRef 的关闭方法时收到localModalRef.close is not a function 错误

Answer 1

这应该适合你：

open(content) {
  this.modalRef = this.modalService.open(content);
  this.modalRef.result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
  });
}

否则您的modalRef 变量将引用ZoneAwarePromise 对象