在 mat table 行中的 td 中单击按钮展开和折叠行

Question

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

                <!-- Document Column -->
                <ng-container matColumnDef="document">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Document </th>
                    <td mat-cell *matCellDef="let search; let i = index">
                        <button mat-button (click)="expandedElement = expandedElement === search ? null : search">Show
                            Log</button>
                        <!-- {{search.document}} -->
                    </td>
                </ng-container>

                    <!-- more containers -->
        <!-- 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 search" [attr.colspan]="displayedColumns.length">
                    <div class="example-element-detail"
                        [@detailExpand]="search == expandedElement ? 'expanded' : 'collapsed'">
                        <div class="example-element-description">
                            <div class="">
                                <div class="">
                                    <pre> {{search.document}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let search; columns: displayedColumns;" class="example-element-row"
                [class.example-expanded-row]="expandedElement === search"
                (click)="expandedElement = expandedElement === search ? null : search">`enter code here`
            </tr>
            <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
        </table>

我有一个 mat-table，每行的列中都有一个按钮（如上面的共享代码所示）。我正在寻找在按钮切换上扩展和折叠行（一次一个）。

ts文件内容：

import { Component, OnInit, AfterContentInit, ViewChild } from '@angular/core';
//other component imports
import { MatTableDataSource, MatPaginator } from '@angular/material';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class SearchComponent implements OnInit {
  displayedColumns: string[] = ['document', 'timestamp', 'conversationId', 'microserviceName', 'responseStatusCode', 'host', 'clusterName', 'elapsedDuration'];
//other useful declarations
  expandedElement: SearchResponse | null;

  // set observables into datasource using MatTableDataSource
  public dataSource = new MatTableDataSource<SearchResponse>();

  constructor(private appService: AppService,
                    private toastr: ToastrService) { }
  ngOnInit() {
    //service call
  }
  //service call and functions
}

无法找出为什么按钮切换不起作用并且行默认展开。

Answer 1

您需要添加到您的 search.component.css

tr.example-detail-row {
  height: 0;
}
.example-element-detail {
  overflow: hidden;
  display: flex;
}
.example-element-row td {
  border-bottom-width: 0;
}

并删除行

中的（点击）

//this
<tr mat-row *matRowDef="let search; columns: displayedColumns;" 
     class="example-element-row"
     [class.example-expanded-row]="expandedElement === search"
     (click)="expandedElement = expandedElement === search ? null : search">
      `enter code here`
</tr>

变成

<tr mat-row *matRowDef="let search; columns: displayedColumns;" 
   class="example-element-row"
   [class.example-expanded-row]="expandedElement === search">
</tr>

看到这个fool stackblitz

在 mat table 行中的 td 中单击按钮展开和折叠行

Expand and collapse row on button click which is in a td in mat table row

angular

mat-table