Question

我正在使用角度材料表可扩展的行。我需要为每行添加删除行按钮。我如何添加它？

我正在使用下面的html代码来做到这一点。实际上，我需要知道如何在每行中添加“删除按钮”

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8" matSort matSortDirection="asc" matSortDisableClear #table>
  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}}  </th>
    <td mat-cell *matCellDef="let user"> {{user[column]}}  

          </td>
          
  </ng-container>


  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let user" [attr.colspan]="displayedColumns.length">
      <div class="example-element-detail"
           [@detailExpand]="user == expandedElement ? 'expanded' : 'collapsed'">
        <div class="example-element-diagram">
          <div class="example-element-position"> <h1>AA</h1> </div>
          <div class="example-element-symbol"> {{user.name}} </div>
          <div class="example-element-name"> {{user.age}} </div>
          <div class="example-element-weight"> {{user.active}} </div>
        </div>
        <div class="example-element-description">
         <p>
         Each expansion-panel must include a header and may optionally include an action bar
         Each expansion-panel must include a header and may optionally include an action bar
         </p>
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </div>
      </div>
    
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let user; columns: displayedColumns;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === user"
      (click)="expandedElement = user">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

Answer 1

如果要坚持使用* ngFor，则需要在ts文件中的列中有2个集合。

更新columnsToDisplay： columnsToDisplay = ['name', 'weight', 'symbol', 'position','remove']; 为列添加新集合： labelColumns' = ['name', 'weight', 'symbol', 'position']; 不要忘记创建一个remove（user）函数，并在显示的内容中添加“ remove”

<ng-container matColumnDef="{{column}}" *ngFor="let column of labelColumns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
    <td mat-cell *matCellDef="let user"> {{user[column]}}</td>
</ng-container>
<ng-container matColumnDef="remove">
    <th mat-header-cell *matHeaderCellDef >Remove</th>
    <td mat-cell *matCellDef="let user">  
        <button mat-button (click)="remove(user)">remove</button> 
    </td>
</ng-container>

我正在使用角度材料表可扩展行

1 个答案: