Question

我只想单击箭头图标（expand_more）来展开所有行

角材页面上的代码： https://stackblitz.com/angular/oyybnyopyemm?file=app%2Ftable-expandable-rows-example.ts

我的HTML

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
      <td mat-cell *matCellDef="let element">
        <mat-icon (click)="onBlink(element)" class="icon bulb" [ngClass]="element.action ? 'blink_me': ''">wb_incandescent</mat-icon>
        <mat-icon (click)="element.status=!element.status" *ngIf="!element.error" class="icon playPause">{{element.status ? 'play_circle_outline' : 'pause_circle_outline' }}</mat-icon>
        <mat-icon *ngIf="element.error" class="error icon">error</mat-icon>
        <mat-icon *matRowDef="let element">expand_more</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail" >
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="example-element-detail"
             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div>
            <p>Serial : {{element.serial}} </p>
            <p>{{element.name}}have a problem.</p>
            <p>Contact a doctor </p>
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

您能帮我设置它吗？

Answer 1

以下面的StackBlitz为例。

我在这里所做的基本上是将点击事件处理程序从行移到您添加的图标上。

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> Actions </th>
    <td mat-cell *matCellDef="let element">
        <mat-icon (click)="onBlink(element)" class="icon bulb" [ngClass]="element.action ? 'blink_me': ''">wb_incandescent</mat-icon>
        <mat-icon (click)="element.status=!element.status" *ngIf="!element.error" class="icon playPause">{{element.status ? 'play_circle_outline' : 'pause_circle_outline' }}</mat-icon>
        <mat-icon *ngIf="element.error" class="error icon">error</mat-icon>
        <mat-icon (click)="expandedElement = expandedElement === element ? null : element">expand_more</mat-icon>
    </td>
</ng-container>
...
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element">
</tr>

Answer 2

您需要做的就是将click事件从该行移至您的mat-icon。

<mat-icon (click)="expandedElement = expandedElement === element ? null : element">
    {{expandedElement === element ? 'expand_less' : 'expand_more'}}
</mat-icon>

<!-- ... -->

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

这是StackBlitz上的一个有效示例。

表格展开后点击图标

2 个答案: