Я использую угловые таблицы материалов расширяемых строк

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

Вам нужно иметь 2 коллекции для столбцов в файле ts, если вы хотите придерживаться этого * ngFor.

Обновить столбцы ToDisplay: columnsToDisplay = ['name', 'weight', 'symbol', 'position','remove']; Добавить новую коллекцию для столбцов: labelColumns' = ['name', 'weight', 'symbol', 'position']; Незабудьте создать функцию удаления (пользователя) и добавить «удалить» к отображаемым

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