时间戳

首页 > 解决方案 > 垫表可扩展行 Angular 7

angular - 垫表可扩展行 Angular 7

问题描述

有没有办法在特定列上禁用行扩展。通常，如果您单击行的任何部分，它会展开。但是假设一列是评论部分，当用户单击输入字段时，您不希望该行扩展。就像在这个例子中一样。单击位置列时如何防止行扩展：https ://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

标签： angularexpandablemat-table

解决方案

在您的示例 Stackblitz 中，扩展行的代码在行定义中设置：

...
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
</tr>
...

为了使该行仅在用户单击特定列时展开（或者在您的情况下，如果单击特定列则不展开），您需要将 onClick 函数和必要的 css 移动到应该展开的那些列，例如

    ...
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
         (click)="expandedElement = expandedElement === element ? null : element"> {{element.weight}} </td>
    </ng-container>
    ...

如果单击位置列，我已将您的示例修改为不展开/折叠：Stackblitz

PS：为了更好的可维护性，您应该调整 css 类名等。

推荐阅读