Mat Table 可扩展行 Angular 7

Question

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

Answer 1

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

例如：Expansion Panel | Angular Material

更新： 您可以尝试使用 $event.stopPropagation，如该解决方案中所述：

Answer 2

使用指针事件none

The pointer-events property defines whether or not an element reacts to pointer events.

创建一个带有指针事件的 Class：none 属性然后使用 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

Answer 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>
    ...

如果单击位置列，我已将您的示例修改为不 expand/collapse：Stackblitz

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

Mat Table 可扩展行 Angular 7

Mat Table Expandable Rows Angular 7

expandable

angular

mat-table