转换数据到模态的角度11？
转换数据到模态的角度11？
提问于 2021-12-29 20:49:33
我在html页面上有一个数据表，该数据表由一个对象数组填充。每一行中都有一个删除按钮。单击delete按钮时，会弹出一个模式，询问是否真的要删除该行。
我试图找出如何将行的id转换到模式中，以便当有人单击“是”时，我可以将该id发送到一个端点，该端点将从表中删除该条目。
请记住，模态的代码与表的代码位于同一个页面上。换句话说，模态不是一个单独的组件。
下面的代码和截图说明了这个问题.
<table class="table table-bordered table-striped mt-3">
<thead>
<tr>
<th scope="col">Application</th>
<th scope="col">Error Source</th>
<th scope="col">Message</th>
<th scope="col">StackTrace</th>
<th scope="col">Date</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
<td>{{ error.application }}</td>
<td>{{ error.errorSource }}</td>
<td>{{ error.message }}</td>
<td>{{ error.stackTrace }}</td>
<td>{{ error.date }}</td>
<td>{{ error.user }}</td>
<td class="edit-button">
<button class="btn btn-primary"
type="button"
data-bs-toggle="modal"
attr.data-bs-target="#{{ deleteRoleModalId }}">
Delete
</button>
</td>
</tr>
</tbody>
</table>下面是模型的代码(同样，在相同的html页面上)
<app-modal [id]="deleteRoleModalId"
[title]="deleteRoleTitle">
<p>Are you sure you want to delete this role? </p>
<div class="mt-3">
<button class="btn btn-primary float-start"
type="button"
(click)="deleteRole()">
Yes
</button>
<button class="btn btn-secondary me-1 float-start"
type="button"
data-bs-dismiss="modal">
No
</button>
</div>
</app-modal>这就是物体数组的样子..。
public listOfErrors: any[] = [
{
id: 1,
application: "Default Case Set",
errorSource: "CASEWORK",
message: 34,
stackTrace: 0,
date: 0,
user: 0
}
];这张桌子看起来像..。
这就是这种模式..。
回答 2
Stack Overflow用户
发布于 2021-12-29 21:09:16
假设模态组件是主组件的子组件(因为您提到它们在同一个HTML文件中)，则id通过@Input()从父组件传递到模态，然后您可以通过eventEmitter和@Output()装饰器将数据传递给父组件(已删除/不删除)。
请参阅正式文档中的详细实现方式：https://angular.io/guide/component-interaction
另一种选择可能是使用服务和可观察性，这是另一种可行的方法，尽管要处理组件之间的信息通信要复杂一些。当组件不相关时，这种方法特别有用。
Stack Overflow用户
发布于 2021-12-29 21:14:36
我会创建模态作为它自己的组成部分，并使用角模态指令。这样，您还可以丰富这个组件，使其对任何类型的删除都有用。换句话说，这个组件可以负责删除内容。
export class DeleteModalComponent {
@ViewChild('modal', { static: true }) modal: ModalDirective;
public deleteId= '';
show(id: string): void {
this.deleteId = id
this.modal.show();
}
delete(): void {
//Delete logic here with this.deleteId
}
close(): void {
this.modal.hide();
}
}因此，在表组件ts文件中，您将调用模式的"show“方法来打开它，以及rowId (errorId?)。
/// Add the modal as a viewchild to your table component
@ViewChild('deleteModal', { static: true }) deleteModal: DeleteModalComponent;
openDeleteModal(rowId: string): void {
this.deleteModal.show(rowId);
}因此，在HTML中：
<table class="table table-bordered table-striped mt-3">
<thead>
<tr>
<th scope="col">Application</th>
<th scope="col">Error Source</th>
<th scope="col">Message</th>
<th scope="col">StackTrace</th>
<th scope="col">Date</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
<td>{{ error.application }}</td>
<td>{{ error.errorSource }}</td>
<td>{{ error.message }}</td>
<td>{{ error.stackTrace }}</td>
<td>{{ error.date }}</td>
<td>{{ error.user }}</td>
<td class="edit-button">
<button class="btn btn-primary"
type="button"
data-bs-toggle="modal"
(click)="openDeleteModal(error.id)"
Delete
</button>
</td>
</tr>
</tbody>
</table>
<deleteModal #deleteModal></deleteModal>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70524863
复制相关文章
相似问题
腾讯云开发者
