Программно открыть и закрыть расширенный ряд кнопкой

Question

Я создал таблицу с расширенными строками на основе этого примера:

https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Fcdk-detail-row.directive.ts

Я хотел бы расширить и закрыть строку на кнопке (значок arrow_down, arrow_up), а не нажав на всю строку.

Например:

Когда я нажимаю на иконку в строке, она расширяется или закрывается

    <ng-container matColumnDef="arrow">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let element">   
        <i class="material-icons" 
           (click)="onToggle()" >
          keyboard_arrow_down
        </i> 
      </mat-cell>
    </ng-container>

Я застрял в этой точке, и я не знаю, что делать ..

Answer 1

Я не думаю, что есть чистое решение, как вы можете видеть здесь есть немного хакерского обходного пути.

Я изменил ваш стек здесь , и я думаю, что он копирует то, что вы пытаетесь сделать довольно хорошо.

В шаблоне нужно вызвать stopPropagation по событию нажатия на ячейки:

<mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">

Значок устанавливается на основе дополнительного свойства в модели данных, которую я добавил (state):

{{element.state === 'expanded' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}

И то, будет ли развернута строка, также зависит от этого свойства:

<div class="mat-row detail-row" [@detailExpand]="element.state" style="overflow: hidden">