如何将数据传递到Angular ng-bootstrap模态

Question

我认为我缺少了一些东西，但无法弄清楚是什么。基本上，我试图将一个对象传递给模态，如下所示，但是我没有获取传递的对象，而是获取null ...所以我认为范围存在问题，但是我是Angular的新手，需要帮助。] >

component.html：

            <tbody>
              <tr *ngFor="let user of userList">
                <!-- <th scope="row">{{ind}}</th> -->
                <th scope="row">{{ user.id }}</th>
                <td>{{user.name}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.role}}</td>
                <td>
                  <button type="button" class="btn btn-primary" (click)="openModal(editUserModal, user)">Edit</button>

                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #editUserModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="editUserModal">Edit Profile</h5>
    <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    <form [formGroup]="editUserForm" (ngSubmit)="onSubmit()">
      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">Name</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="name" id="name">
        </div>
      </div>
      <div class="form-group row">
        <label for="username" class="col-sm-4 col-form-label">Username</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="username" id="username">
        </div>
      </div>
      <div class="form-group row">
        <label for="password" class="col-sm-4 col-form-label">Password</label>
        <div class="col-sm-8">
          <input type="password" class="form-control" formControlName="password" id="password">
        </div>
      </div>
      <div class="form-group row">
        <label for="role" class="col-sm-4 col-form-label">Role</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="role" id="role">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
    </form>
  </div>
</ng-template>
component.ts

ngOnInit() {

    this.editUserForm = this.fb.group({
      name: new FormControl(null, []),
      username:new FormControl(null, []),
      password: new FormControl(null, []),
      role:new FormControl(null, [])

    });
}

  openModal(targetModal, user) {
    this.modalService.open(targetModal, {
      centered: true,
      backdrop: 'static'
    });

    this.editUserForm.patchValue({
      name: user.name,
      username: user.username,
      password: user.password,
      role: user.role

    });
  }

  onSubmit() {
    this.modalService.dismissAll();
    console.log("res:", this.editUserForm.getRawValue());
  }
ng-bootstral 6.0.1，Angular 9.0.1

我认为我缺少了一些东西，但无法弄清楚是什么。基本上，我试图将对象传递给模态，如下所示，但是我没有获取传递的对象，而是获取了null ...所以我认为这是一个问题...

Answer 1

我看不到尝试通过提供的代码传递数据的尝试。这是手册：How to pass data to and receive from NG Bootstrap modals。它应该可以帮助您。