如何在 Angular 11 中使用复选框删除多行

Question

如何删除选定的行以及如何删除 angular 11 中的所有行？

这是我的模型

//model 
export interface Book {
    id: number;
    title: string;
    description: string;
    image: string;
}

这是我的 html 文件

//html
<p-table [value]="books" [lazy]="true" (onLazyLoad)="lazyLoadHandler($event)" [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" >
            <ng-template pTemplate="header">
                <tr>
                    <th  style="width: 3rem" >
                        <nb-checkbox ></nb-checkbox>
                    </th>
                    <th pSortableColumn="id">Id <p-sortIcon field="id"></p-sortIcon>
                    </th>
                    <th pSortableColumn="title">Title <p-sortIcon field="title"></p-sortIcon>
              
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-data>
                <tr>
                    <td>
                      
                        <nb-checkbox value="books" #{{data.id}}></nb-checkbox>
                    </td>
                    <td>{{data.id}}</td>
                    <td>{{data.title}}</td>
                    
                </tr>
            </ng-template>
        </p-table>

Answer 1

从 table 中删除所选项目时需要考虑很多事情，并且有很多方法可以实现。

一个选项是:

在界面中添加一个属性selected
为 table 上的每个项目创建一个复选框，并在属性上使用双向绑定。
创建一个按钮来处理点击事件
用新值过滤数组。

另一种选择 是将所选项目保留在另一个列表中。因此，当单击按钮时，您可以根据需要过滤项目。例如：

onRemoveSelectedClicked() {
    this.items = this.items.filter(x => 
      this.selectedItems.every(y => y.id !== x.id)
    )
}

我使用 primeNg 的 table 创建了一个小演示。

你可以玩here。

PS：我不知道nb-checkbox是如何工作的，但是如果你不能从文档中理解它是如何工作的或者它让你比它更麻烦应该，那么你应该考虑更换它。我建议您使用 带有纯 HTML 和 CSS 的自定义复选框（如示例）或 primeNg' s checkbox or the primeNg's selection mode 在 table.

如何在 Angular 11 中使用复选框删除多行

How to Delete Multiple Rows With Checkboxes In Angular 11

primeng

angular

angular11