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

我按照这个步骤为每一行创建一个扩展面板。我已禁用行，单击以通过

（单击）=“$event.stopPropagation（）”

在

mat单元格中展开面板。现在我需要展开编辑按钮上的面板。下面是我的代码：

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


不
{{element.no}
类别
{{element.name}
地位
不活跃的
编辑
删除
类别
不活跃的
更新
尚未添加任何类别

我希望
编辑
按钮可以用作扩展器。
我需要做哪些必要的更改？
只需向DisplayColumns添加一个新的列“action”

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>


{{column！='action'？列：'}}
{{元素[列]}}
点击

查看按钮（单击）中的代码与
中（单击）中的代码相同（不要忘记从最后一个按钮中删除）

请参见
只需向DisplayColumns添加一个新的列“action”

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>


{{column！='action'？列：'}}
{{元素[列]}}
点击

查看按钮（单击）中的代码与
中（单击）中的代码相同（不要忘记从最后一个按钮中删除）

查看
我不知道为什么我的
元素[列]
值没有被获取，尽管我没有获取任何控制台错误，但rest仍然工作正常。谢谢你，元素就是全部。如果您编写
{{element | json}
，那么您可以检查它-您的表崩溃了，但是您可以看到对象-
column
获取columnsToDisplay（即字符串数组）中元素的值。is元素的属性等于column，必须显示它。检查是否有输入错误，记住Angular是区分大小写的。我不知道为什么我的
元素[column]
值没有被提取出来，尽管我没有得到任何控制台错误，rest仍然工作正常。谢谢你，元素就是全部。如果您编写
{{element | json}
，那么您可以检查它-您的表崩溃了，但是您可以看到对象-
column
获取columnsToDisplay（即字符串数组）中元素的值。is元素的属性等于column，必须显示它。检查是否有打字错误，并记住Angular区分大小写