2016-09-11 61 views
4

所以我有一個NgbModal與它的形式,我想實現的是關閉它成功提交。無法關閉ng-bootstrap模式

這是我ModalComponent:

@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

回答

6

的close方法這應該爲你工作時收到localModalRef.close is not a function錯誤:

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對象

+1

你是對的!非常感謝:) –

+1

你會認爲ng-bootstrap網站向你展示瞭如何做到這一點。乾杯 – user172902