点击图标展开表格

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

您需要做的就是将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 上的一个工作示例。

Answer 2

以下面的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>