PrimeNG 在单个选择中从表中删除行选择

Question

我尝试使用来自 PRIMENG 的 Table - CRUD，但是我遇到了与示例相同的问题。即使我关闭对话框，选择也会继续。 我想在关闭对话框后清除该选择。 我什至尝试使用类表中的@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>

我关注的文档中的链接： https://www.primefaces.org/primeng/#/table/crud

Answer 1

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

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

假设下面是我的表格，我已将 #dd 作为该表格的参考。

<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');
    }
  }

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