Como excluir linhas selecionadas e como excluir todas as linhas no angular 11?
este é meu modelo
//model
export interface Book {
id: number;
title: string;
description: string;
image: string;
}
Este é o meu arquivo 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>
Há muitas coisas a se considerar ao remover itens selecionados de uma tabela e há várias maneiras de implementar isso.
Uma das opções é :
selectedna interfaceOutra opção é manter os itens selecionados em outra lista. Portanto, quando o botão é clicado, você pode filtrar os itens de forma dependente. Por exemplo:
onRemoveSelectedClicked() {
this.items = this.items.filter(x =>
this.selectedItems.every(y => y.id !== x.id)
)
}
Criei uma pequena demonstração, usando primeNga tabela de.
Você pode brincar por aqui .
PS: Não sei como nb-checkboxfunciona, mas se você não consegue entender como funciona a partir da documentação ou se isso lhe causa mais problemas do que deveria, você deve considerar substituí-lo. Eu sugiro que você usar uma caixa de seleção personalizado com HTML puro e CSS (como no exemplo) ou primeNgda caixa de seleção ou o primeNg's modo de seleção na tabela.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras