垫表可扩展行 Angular 7答案

【问题标题】：Mat Table Expandable Rows Angular 7垫表可扩展行 Angular 7
【发布时间】：2019-08-11 02:55:42
【问题描述】：

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

【问题讨论】：

标签： angular expandable mat-table

【解决方案1】：

是的，如果您搜索更多内容，您可以使用 Angular Material 或其他设计组件。

例如：Expansion Panel | Angular Material

更新：您可以尝试使用$event.stopPropagation，如此解决方案中所述：Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

【讨论】：

我说的是这个例子中的东西。单击位置列时如何防止行扩展：stackblitz.com/angular/…
@Flash 所以你希望它在你点击名称、重量和符号列而不是点击位置列时展开？
正确，因为在我的情况下，该列将是评论部分，我不希望每次点击输入字段时它都会展开
@Flash 然后您可以尝试使用$event.stopPropagation，如该解决方案中所述：Solution

【解决方案2】：

不使用指针事件

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

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

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"
        [class.disable]="element[column] == 'Hydrogen' || element[column] == '1.0079' 
        || element[column] == 1 ||element[column] == 'H'">  {{element[column]}} </td>
</ng-container>

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

【讨论】：

在那个例子中，整个第一行只是被禁止扩展
您可以通过删除条件来启用该列

【解决方案3】：

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

【讨论】：

感谢 $event.stopPropagation 是一个更快的解决方案