Разверните и сверните строку по нажатию кнопки, которая находится в строке тд в таблице матов

Question

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

`введите код здесь`

У меня есть таблица соответствия с кнопкой в ​​столбце в каждой строке (как показано в общем коде выше). Я ищу, чтобы развернуть и свернуть строку (по одному) при переключении кнопок.

содержимое в файле 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>

Смотрите это Дурак, стекаблиц