如何在Angular 7的模式中显示单个表列的详细信息？

我有一个约会表，每行中都有一个“编辑”按钮，我需要它弹出一个包含日历的模态，其中可以更改约会的日期，但要注意的是模态不会弹出起来，我的屏幕全是白色的！

**

<div class="raw">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <button href="appointments.html" class="btn float-right">View all</button>
      </div>
      <div class="card-body p-0">
        <table class="table table-borderless table-hover">
          <thead>
            <tr>
              <th>Profile</th>
              <th>Doctor Name</th>
              <th>Timing</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of data ;let index= index">
              <td>{{item.PROFILEPHOTO}}</td>
              <td>{{item.DOCTORNAME}}</td>
              <td>{{item.APPOTIME}}</td>
              <td class="function" (click)="open(content)" data-toggle="modal" data-target="#infoModal">
                <button class="btn-btn-rounded" >Edit</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
          <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="dateOfBirth">Date of birth</label>
              <div class="input-group">
                <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
                  #dp="ngbDatepicker">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>

**

这是.ts文件

    import { Component, OnInit } from "@angular/core";
import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: "appointment",
  templateUrl: "./appo.component.html",
  styleUrls: ["./appo.component.scss"]
})
export class AppoComponent implements OnInit {
  data: Array<any>;

  constructor() {}

  ngOnInit() {
    this.data = [
      { PROFILEPHOTO: "Steve", DOCTORNAME: "Jobs", APPOTIME: "8:00am" },
      { PROFILEPHOTO: "Simon", DOCTORNAME: "Philips", APPOTIME: "9:45am" },
      { PROFILEPHOTO: "Jane", DOCTORNAME: "Doe", APPOTIME: "10:00am" },
      { PROFILEPHOTO: "Larry", DOCTORNAME: "Thornton", APPOTIME: "8:30am" },
      { PROFILEPHOTO: "Hiver", DOCTORNAME: "Choe", APPOTIME: "9:00am" },
    ];
  }
}
export class NgbdModalBasic {
  closeResult = "";

  constructor(private modalService: NgbModal) {}

  open(content: any) {
    this.modalService
      .open(content, { ariaLabelledBy: "modal-basic-title" })
      .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}`;
    }
  }
}

我导入了模块，一切似乎都不起作用，但是当我删除Modal时，一切又恢复了，这意味着我肯定错过了一些东西，但是我不知道在哪里！