在角材料中展开

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>

通过此代码，主表和主表中的Onclicking ICON第二个表将展开，我可以查看数据。但，1）第二表未显示标题。什么是错误的编码？2）在2表之后，我想以这种扩展和折叠方式添加一些4-5输入字段。没有桌子怎么添加？3）这里的图像（当前编码的输出）。请让我知道有人在回答您。

Answer 1