PrimeNG在單選中從表中刪除行選擇

Question

我嘗試使用PRIMENG中的Table-CRUD，但是，與示例一樣，我遇到了同樣的問題。 即使我關閉對話框，選擇也會繼續。 關閉對話框后，我想清除該選擇。 我什至嘗試使用Table類中的@ViewChild引用。

@ViewChild('dtUserEmp') table: Table; 

標簽識別

<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 。 我希望這個位置固定在桌子上。 因此，硬編碼將在任何地方工作。 雖然可以使它動態。