Question

是否可以在特定列上禁用行扩展。通常，如果单击行的任何部分，它将展开。但是说一栏是注释部分，当用户单击输入字段时，您不希望该行扩展。就像在这个例子中一样。单击位置列https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

时如何防止行扩展

Answer 1

在您的示例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类名称等。

Answer 2

是的，如果您进行更多搜索，则可以将Angular Material或其他Design组件用于Angular。

例如，请参见：Expansion Panel | Angular Material

更新：您可以按照此解决方案中的说明尝试使用$event.stopPropagation：Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

Answer 3

不使用指针事件

pointer-events属性定义元素是否做出反应指针事件。

使用指针事件创建一个类：none属性，然后使用ngClass动态添加

The property 'Converter' was not found in type 'SvgImageExtension'.

示例：https://stackblitz.com/edit/angular-fpp7fx

垫表可扩展行角度7

3 个答案: