0

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

4

3 回答 3

5

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

于 2019-03-20T12:34:20.633 回答
1

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

例如：扩展面板 | 角材料

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

于 2019-03-20T12:13:29.693 回答
1

使用指针事件无

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

于 2019-03-20T12:33:56.120 回答