如何将数据传递给 Angular ng-bootstrap modal

Question

我想我错过了什么，但无法弄清楚是什么。 基本上我正在尝试将一个对象传递给模态，如下所示，但不是获取传递的对象，而是得到 null...所以我认为范围有问题，但我是 Angular 的新手，需要一些帮助。

组件.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>

组件.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

Answer 1

我没有看到在提供的代码中传递数据的尝试。这是手册：如何将数据传递到 NG Bootstrap 模式以及从 NG Bootstrap 模式接收数据。它应该对你有所帮助。