Angular 8: Как переключать несколько строк при щелчке строк и расширять все строки одним нажатием кнопки Angular Таблица материалов?

Question

Я работаю над таблицей материалов Angular и получаю источник данных динамически. Я хочу переключать несколько строк в щелчке строки с расширением всех строк нажатием кнопки вне таблицы.

Я могу развернуть одну строку за раз при щелчке строки, но я хочу переключать несколько строк. Как я могу это сделать?

Вот это html

<input class="input-form-submit" type="button" value="SHOW ALL DETAIL" (click)="showAllDetail()">

<table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8 material-table">

  <ng-container matColumnDef="postedBy">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>By</th>
    <td mat-cell *matCellDef="let element">{{element.first_name}}</td>
  </ng-container>

  <ng-container matColumnDef="postDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
    <td mat-cell *matCellDef="let element">{{element.date | date: 'M/d/yyyy h:mm a'}}
    </td>
  </ng-container>

  <ng-container matColumnDef="balance">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Balance</th>
    <td mat-cell *matCellDef="let element">
      ${{element.balance}}</td>
  </ng-container>

  <ng-container matColumnDef="collected">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Collected</th>
    <td mat-cell *matCellDef="let element">
      (${{element.amountReceived | number : '1.2-2'}})
  </ng-container>

  <ng-container matColumnDef="adjusted">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Adjusted</th>
    <td mat-cell *matCellDef="let element">
      ${{element.adjusted | number : '1.2-2'}}
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element; let i = index" [attr.colspan]="displayedColumns2.length">
      <ng-container *ngIf="showDetailTransaction || (selectedRow == element && i)">
        <div class="trans-div">
          <table class="dt-width transaction-expansion" [@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'">
            <ng-container>
              <tr>
                <td>DATA TO EXPAND</td>
              </tr>
            </ng-container>

          </table>

        </div>
      </ng-container>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns2;" class="transaction-exp-row" [class.transaction-expand-row]="checkExpanded(element)" (click)="onExpandOneRow(element)"></tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="transaction-detail-row" style="height: 0px !important;"></tr>
</table>

Вот код ts

showAllDetail() {
  this.showDetailTransaction = true;
}

checkExpanded(element): boolean {
  let flag = false;
  this.expandedElement.forEach(e => {
    if (e === element) {
      flag = true;
    }
  });
  return flag;
}

onExpandOneRow(element) {
  const index = this.expandedElement.indexOf(element);
  if (index === -1) {
    this.expandedElement.push(element);
  } else {
    this.expandedElement.splice(index, 1);
  }
  this.selectedRow = element;
  this.showHideRow = !this.showHideRow;
}

Answer 1

Для меня лучшим решением является добавление нового свойства ie к источнику данных, «расширенному»

export interface PeriodicElement {
  ...
  expanded?: boolean;
}

Затем, когда вы щелкаете в tr, мы меняем это значение

  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="element.expanded"
      (click)="element.expanded = !element.expanded">
  </tr>

Наконец, вы говорите, когда раскрывается как

<div class="example-element-detail"
           [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">

Для show all вы создаете функцию, которая переводит расширенную переменную источника данных в true -or false, если все true

showAll() {
    if (this.dataSource.some(x => !x.expanded))
      this.dataSource.forEach(x => (x.expanded = true));
    else 
      this.dataSource.forEach(x => (x.expanded = false));
  }

См. стекблиц