加载数据以在Angular中的Ng-Bootstrap模式中进行编辑

时间:2017-11-17 00:26:56

标签: angular angular-services ng-bootstrap

如何使用ng-bootstrap模式加载数据。我是否正在使用它来编辑我的应用中的某些数据?我在编辑时使用了路由并转移到了不同​​的页面,而不是之前在模态中编辑它。但是现在,我想在ng-bootstrap模式中实现数据的加载和编辑?我怎样才能做到这一点?

  

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">&times;</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}`;
    }
  }

0 个答案:

没有答案