时间戳

首页 > 解决方案 > 使用 selectionMode 'multiple' 在 p 表中进行编程行选择

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

问题描述

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

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

我需要以编程方式选择用户刚刚单击的行。我想我只会selectedMessages在点击中推送一个新对象，但它不起作用。对象被推送，但没有任何内容保持选中状态。

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

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

该事件通过以下方式处理：

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

成员初始化为空：

selectedMessages: MailboxItem[] = [];

我的事件正确触发，对象从空 ( []) 变为其中包含一个MailboxItem，但没有选择表行。

标签： angularprimengprimeng-turbotable

解决方案

这里的问题是只有在修改绑定到的数组时才会发生角度变化检测[(selection)]。

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

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

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

this.selectedMessages = [ mail ];

推荐阅读