如何通过单击按钮来扩展 mat-table 中的扩展面板？

Question

我按照这个垫扩展表为每一行创建一个扩展面板。 我已禁用行单击以通过mat-cell中的(click)="$event.stopPropagation()"展开面板。 现在我需要在按钮编辑上展开面板。 以下是我的相同代码：

<div class="mat-elevation-z8" *ngIf="ELEMENT_DATA.length>0">
  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <ng-container matColumnDef="No">
      <th mat-header-cell *matHeaderCellDef> No </th>
      <td mat-cell *matCellDef="let element"> {{element.no}}</td>
    </ng-container>
    <ng-container matColumnDef="Category">
      <th mat-header-cell *matHeaderCellDef> Category </th>
      <td mat-cell *matCellDef="let element"> {{element.name}}</td>
    </ng-container>
    <ng-container matColumnDef="Status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="">
        <mat-slide-toggle>Inactive</mat-slide-toggle>
      </td>
    </ng-container>
    <ng-container matColumnDef="Action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="" (click)="$event.stopPropagation()">
        <button mat-flat-button color="primary" style="margin-right: 5px;">EDIT</button>
        <button mat-flat-button color="warn">DELETE</button>
      </td>
    </ng-container>
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
        <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div class="example-element-description">
            <form>
              <mat-form-field class="example-full-width create-fields">
                <mat-label>Category</mat-label>
                <input matInput name="category" ngModel>
              </mat-form-field>
              <mat-slide-toggle>Inactive</mat-slide-toggle>
              <button mat-flat-button color="primary" style="display: inline;margin-left: 50px;">Update</button>
            </form>
          </div>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
    ></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>
  <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>
<h1 *ngIf="ELEMENT_DATA.length == 0" class="message">No Categories Added Yet</h1>

我希望EDIT按钮用作扩展器。 我需要进行哪些必要的更改？

Answer 1

只需向 DisplayColumns 添加一个新列“操作”

columnsToDisplay = ['name', 'weight', 'symbol', 'position','action'];

然后更改定义列的代码

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column!='action'?column:''}} </th>
    <td mat-cell *matCellDef="let element"> 
      {{element[column]}} 
      <button *ngIf="column=='action'" 
       (click)="expandedElement = expandedElement === element ? null : element">
             click</button>
      </td>
</ng-container>

看到按钮 (click) 中的代码与<tr mat-row *matRowDef..>中的 (click) 中的代码相同（不要忘记从最后一个中删除）

查看堆栈闪电战