扩展 Angular Material

Question

我正在使用 Angular Material 来显示内容。我的 TS 代码是：

import { Component, OnInit, ViewChild } from '@angular/core';
import { AdminReassignTaskService } from 'src/app/services/admin-reassign-task.service'
import { Location } from '@angular/common';
import { trigger, state, transition, animate, style } from '@angular/animations';

@Component({
  selector: 'app-admin-reassign-task',
  templateUrl: './admin-reassign-task.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./admin-reassign-task.component.scss']
})
export class AdminReassignTaskComponent implements OnInit {
  reassignedlist;
  columnsToDisplay =  ['test'];
  @ViewChild('expandedElement') expandedElement;
  displayedColumns = ['comment'];
  taskList;

  constructor(private serv: AdminReassignTaskService,public _location: Location) { }

  ngOnInit() {
    this.serv.getByURL('admin/list').subscribe(response => {
      this.reassignedlist=response;
    })
  }

  editReassigned(i,element){
    const result = [this.reassignedlist.find( ({ id }) => id === i )];
    this.taskList=result;
    this.expandedElement = this.expandedElement === element ? null : element ;
  }

}

我的 HTML 代码是

<div class="main-content-wraper">
<ng-container>
      <div class="mat-elevation-z2 card rounded-0 p-3 d-flex flex-row flex-wrap" >
        <table mat-table [dataSource]="reassignedlist" multiTemplateDataRows class="mat-elevation-z8 w-100 custom-table">
          <ng-container matColumnDef="task_name">
            <th mat-header-cell *matHeaderCellDef> Task Name </th>
            <td mat-cell *matCellDef="let element"> {{element.taskName}} </td>
          </ng-container>  
          <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef>  </th>
            <td mat-cell *matCellDef="let element"> 
                <button mat-icon-button  matTooltip="View Task" (click)="editReassigned(element.id,element)" ><mat-icon >flag</mat-icon></button>
            </td>
          </ng-container>      

           <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
              <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                  <table mat-table [dataSource]="taskList" class="task-card" >
                      <ng-container matColumnDef="comment">
                        <th mat-header-cell *matHeaderCellDef> Assigned User Comment</th>
                        <td mat-cell *matCellDef="let element" matTooltip="Assigned User Comment"> {{element.assignedUserCmt}} </td>
                      </ng-container>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
              </div>
            </td>
          </ng-container>     

          <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
          <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
              class="example-element-row"
              [class.example-expanded-row]="expandedElement === element" >
          </tr>
          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
        </table>    
    </div>
  </ng-container>
</div>

通过此代码，主 Table 和主 table 第二 table 中的单击图标展开，我可以查看数据。但， 1) 2nd Table 没有显示前往它的航向。这里的错误编码是什么？ 2) 在 2 Table 之后，我想以这种展开和折叠的方式添加一些 4-5 输入字段。我如何在没有 table 的情况下添加？ 3）这里附上图像（当前编码的输出）。请让我知道任何有答案的人。

Answer 1

我认为您需要使用扩展面板作为 angular material 手风琴的一部分：

https://stackblitz.com/angular/dnbkkoraexxa?file=src%2Fapp%2Fexpansion-overview-example.ts

扩展 Angular Material

Expanding in Angular Material

datatable

expand

html-table

collapse

angular-material