PrimeNG 在单选中从 table 中删除行选择

Question

我尝试使用 Table - 来自 PRIMENG 的 CRUD 但是，我遇到了与示例相同的问题。即使我关闭对话框，选择也会继续。我想在关闭对话框后清除该选择。我什至尝试使用来自 class Table.

的@ViewChild 引用

@ViewChild('dtUserEmp') table: Table;

标签ID

<p-table #dtUserEmp selectionMode="single"
       [(selection)]="usuarioEmpresaSelection"
       (onLazyLoad)="lazyLoadingNat($event)"
       (onRowSelect)="rowSelect($event)"
       (onRowUnselect)="rowUnselect($event)"
       dataKey="empresa"...>... </p-table>

Link 来自我关注的文档： https://www.primefaces.org/primeng/#/table/crud

Answer 1

这不是最好的方法，但我可以告诉您实现此目的的方法。以后你可以用更好的方式来做。您还会在控制台中看到一些错误，但您可以轻松处理它们并且不会破坏您的应用程序。所以让我们打破你的要求ui评论如下：

现在只要你点击任何行 class ui-state-highlight 就会被添加。所以关键是每当我们点击保存时删除这个class。

假设下面是我的 table 并且我已经给出了 #dd 作为对这个 table 的参考。

<p-table #dd [columns]="cols" [value]="cars" 
  selectionMode="multiple" 
  [(selection)]="selectedCars2" 
  [metaKeySelection]="true">
...
</p-table>

现在，无论何时调用保存按钮，只需在其中传递 dd，或者您可以在组件中使用 dd 作为 @ViewChild .

<button (click)="save(dd)">Save</button>
or
import { Table } from '../../../../node_modules/primeng/components/table/table';
export class TableComponent{
 @ViewChild('dd') dd: Table;
 save(){
 }

}

现在在保存函数中的组件文件中执行以下操作：在这里您可以找到所有行 e.tableViewChild.nativeElement.children[2].children

save(e:any){
    let element = e.tableViewChild.nativeElement.children[2].children;
    for(let key in element){
        (element[key].classList).remove('ui-state-highlight');
    }
  }

这将从 table 的行中删除 class。您可以打印该值并尝试为 children[2] 动态获取该值。我硬编码为 2。您需要搜索 tbody。我希望这个位置固定为table。所以硬编码将在任何地方工作。虽然你可以让它动态化。

PrimeNG 在单选中从 table 中删除行选择

PrimeNG remove row selection from table in single selection

angular

primeng

primeng-datatable