Expanding in Angular Material

问题

I am using Angular Material for displaying content. My TS code is:

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

}

And my HTML Code is

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

By this code, Main Table and Onclicking ICON in the main table Second table expands and I can View Data. But, 1) 2nd Table not Displaying Heading to it. What is the Wrong Coding Here? 2) After 2 Table I wanted to add some 4-5 Input Field in this Expand and collapse manner. How I can ADD without a table? 3) Here Attached Image (Output of current Coding). Kindly let me know anyone having an answer with you.