问题
How can i load the data using the ng-bootstrap modal. I'm using this for editing some data in my app? I've used routing and transferring to a different page when editing instead of editing it in modal before. But right now, i want to implement the loading and editing of data in ng-bootstrap modal? How can i do this?
HTML
button type="button"(click)="open(content)">Edit</button>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Edit Name</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" (ngSubmit)="onEditName(f)" #f="ngForm">
<div class="form-inline">
<label class="col-md-4">Unit</label>
<input class="col-md-8" type="text" class="form-control" id="name" name="name" ngModel required>
</div>
<br>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" [disabled]="!f.valid">Save Changes</button>
<button type="button" data-dismiss="modal" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</form>
</div>
</ng-template>
TS
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)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
来源:https://stackoverflow.com/questions/47341403/loading-data-for-editing-in-ng-bootstrap-modal-in-angular