Question

你好，我想使整个tr在我的树形表中可以单击。我正在使用PrimeNG的树表。目前，我只能单击按钮来展开表格行。现在，我希望能够单击整个表格行：

<tr>
    <td>
        <a href="#" [pRowToggler]="rowData">
            <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
        </a>

        <td>
            {{Partij.Partij.sBedrijfsNaam}}
        </td>
        <td><p-dropdown [options]="Bedrijfstype" [(ngModel)]="Partij.Partij.sBedrijfsType"></p-dropdown></td>
        <td><p-dropdown [options]="Status" [(ngModel)]="Partij.Partij.sStatus"></p-dropdown></td>
        <td><p-dropdown [options]="Rekeningbank" [(ngModel)]="Partij.Partij.sRekBank"></p-dropdown></td>
</tr>

现在我只能单击上面的td怎么做，所以我可以单击整个tr？

Answer 1

将pRowToggler移动到row元素，并通过添加$event.stopPropagation()来确保下拉列表不会传播任何点击事件：

<tr [pRowToggler]="rowData">
<td>
  <a href="#">
    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
  </a>

<td>
    {{Partij.Partij.sBedrijfsNaam}}
</td>
<td><p-dropdown [options]="Bedrijfstype" [(ngModel)]="Partij.Partij.sBedrijfsType" (click)="$event.stopPropagation()"></p-dropdown></td>
<td><p-dropdown [options]="Status" [(ngModel)]="Partij.Partij.sStatus" (click)="$event.stopPropagation()"></p-dropdown></td>
<td><p-dropdown [options]="Rekeningbank" [(ngModel)]="Partij.Partij.sRekBank" (click)="$event.stopPropagation()"></p-dropdown></td>
</tr>

Answer 2

为a标签赋予一个类，使其与CSS中的第一个td一样大。

然后，您可以在每个tr上触发一个事件：

<tr (click)="expanded = !expanded" class="clickable">
    /* ... */
</tr>

或其他td上的

：

...
<td class="clickable">
    <p-dropdown
        [options]="Bedrijfstype"
        [(ngModel)]="Partij.Partij.sBedrijfsType"
        (click)="expanded = !expanded"
    ></p-dropdown>
</td>
...

请记住为tr或td赋予一个类，以便为他们提供如下CSS规则，以突出显示它们是可点击的：

.clickable {
    cursor: pointer;
}

角度可以使整个表行在树表中可单击吗？

2 个答案: