使用 selectionMode 'multiple' 在 p-table 中进行编程行选择

Question

我有一个PrimeNG v12.2 p-table组件缩写如下：

<p-table
   [(selection)]="selectedMessages"
   selectionMode="multiple">

我需要以编程方式 select 用户刚刚单击的行。我想我会在点击时将一个新对象推送到 selectedMessages，但它不起作用。对象被推入，但没有任何东西 selected.

我需要处理右键单击。该行定义为：

<tr (contextmenu)="clickMessage(message)">

事件处理方式：

clickMessage(mail: MailboxItem): void {
    this.selectedMessages.push(mail);
}

成员初始化为空：

selectedMessages: MailboxItem[] = [];

我的事件正常触发，对象从空 ([]) 变为有一个 MailboxItem，但没有 table 行被 selected。

Answer 1

对不起，我现在不能测试这个，但我想你应该把你的 MailboxItem 对象的 id 作为 "dataKey" 在你的 table.

例如，如果您的邮件行从这样的数组中获取值：

mailsArray: MailboxItem[]  =
[ 
 { 
   myId=1; 
   from="Patrick"; 
   message="Blah,blah,bla..";
 },
 { 
   myId=2; 
   from="Swaiczwe"; 
   message="Lorem blahblah etceterabla..";
 }
];

那么你的 table 应该有一个像这样的 dataKey 属性：

<p-table
   [(selection)]="selectedMessages"
   selectionMode="multiple"
   [value]="mailsArray"
   dataKey="myId"
>

最后，您的方法 clickMessage() 应该是这样的：

clickMessage(mail: MailboxItem): void {
    this.selectedMessages.push(mail.myID);
}

你也应该在你的页眉和正文模板中加入类似的东西（抱歉，你没有展示你是如何拥有它的，所以它是近似的）：

<ng-template pTemplate="header">
   <tr [pSelectableRow]="mail">
                <th>Id</th>
                <th>From</th>
                <th>Message</th>
   </tr>
</ng-template>

<ng-template pTemplate="body" let-mail  let-rowIndex="rowIndex">
            <tr [pSelectableRow]="mail" [pSelectableRowIndex]="rowIndex">
                <td>{{mail.myId}}</td>
                <td>{{mail.from}}</td>
                <td>{{mail.message}}</td>
            </tr>
</ng-template>

P.S：也尝试更改

<ng-template pTemplate="header">
   <tr [pSelectableRow]="mail">

只是一个 'simple' ，像这样：

<ng-template pTemplate="header">
   <tr>

Answer 2

这里的问题是 Angular 更改检测仅在绑定到 [(selection)] 的数组被修改时发生。

解决方案是重新分配给数组本身，这将触发更改检测并正确地 select 行：

this.selectedMessages = [...this.selectedMessages, mail];

在我的用例中，我们想要取消 select 除了被右键单击的行之外的所有行，所以它很简单：

this.selectedMessages = [ mail ];

使用 selectionMode 'multiple' 在 p-table 中进行编程行选择

Programmatic row selection in a p-table using selectionMode 'multiple'

angular

primeng

primeng-turbotable