angular - Angular 7 材质动态显示 mat-table 内的 mat-table 数据（第二行）

Question

我正在尝试构建一个具有可扩展行的功能的垫表，其中可以在垫表的行内显示其他数据。我按照可扩展行的示例进行操作，但是，我希望辅助表始终设置为“扩展”。我可以显示辅助行，但表格没有正确显示，我相信这是因为我没有正确提取辅助数据。这是我的 HTML：

    <div>
  <mat-table id="msList" [dataSource]="projectMsList" [multiTemplateDataRows]="true" matSort>

    <ng-container matColumnDef="projectid">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Project ID</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.projectid}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="milestoneid">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone ID</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.milestoneid}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="projectname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Initiative Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.projectname}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="msname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.msname}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="mstype">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Type</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.mstype}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.status}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="startdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.startdate}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="enddate">
      <mat-header-cell *matHeaderCellDef mat-sort-header>End Date</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.enddate}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="completeddate">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Completed Date</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.completeddate}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="statusdesc">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Status Description</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.statusdesc}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="msparent">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Parent</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.msparent}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="ordernumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Display order of milestone" matTooltipPosition="above">Order Number</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.ordernumber}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="manage">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-raised-button class="msform-button" matTooltip="View/Edit Milestone Details" matTooltipPosition="above" (click)="updateMilestone(row)">
          Manage
        </button>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="subms">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-raised-button class="msform-button" matTooltip="Add a submilestone" matTooltipPosition="above"
         (click)="onCreateSubmilestone(row)" [ngClass]="{'hide-element': row.mstype =='Sub'}">
          Add Sub
        </button>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="showSubMs">

      <mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="subms-table"
          [@majMsExpand]="expanded">
          <div>
            SHOW SUBMILESTONES ROW! {{element.milestoneid}}
          </div>

          <mat-table [dataSource]="projectMsList" width="100%">

              <ng-container matColumnDef="projectid">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Project ID</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.projectid}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="milestoneid">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone ID</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.milestoneid}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="projectname">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Initiative Name</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.projectname}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="msname">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Name</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.msname}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="mstype">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Type</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.mstype}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="status">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.status}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="startdate">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.startdate}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="enddate">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>End Date</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.enddate}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="completeddate">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Completed Date</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.completeddate}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="statusdesc">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Status Description</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.statusdesc}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="msparent">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Milestone Parent</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.msparent}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="ordernumber">
                  <mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Display order of milestone" matTooltipPosition="above">Order Number</mat-header-cell>
                  <mat-cell *matCellDef="let element">{{element.ordernumber}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="loading">
                  <mat-footer-cell *matFooterCellDef colspan="10">
                    Loading sub-milestones...
                  </mat-footer-cell>
                </ng-container>

                <ng-container matColumnDef="noData">
                  <mat-footer-cell *matFooterCellDef colspan="10">
                    No Sub-Milestones
                  </mat-footer-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumnsSubMs"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumnsSubMs;"></mat-row>
                <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':subMsList!=null}"></mat-footer-row>
                <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(subMsList!=null && subMsList.data.length==0)}"></mat-footer-row>

          </mat-table>

        </div>
      </mat-cell>

    </ng-container>

    <ng-container matColumnDef="loading">
      <mat-footer-cell *matFooterCellDef colspan="10">
        Loading milestones...
      </mat-footer-cell>
    </ng-container>

    <ng-container matColumnDef="noData">
      <mat-footer-cell *matFooterCellDef colspan="10">
        No Milestones
      </mat-footer-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
    class ="majms-row"
    [class.majms-row] = "subMsList === row"
    (click)="showSubMsList(row)" [ngClass]="{'bold-text': row.mstype =='Major', 'hide-element': row.mstype =='Sub'}"></mat-row>
    <mat-row *matRowDef="let row; columns: ['showSubMs']" class="subms-row"></mat-row>
    <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':projectMsList!=null}"></mat-footer-row>
    <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(projectMsList!=null && projectMsList.data.length==0)}"></mat-footer-row>

  </mat-table>

这里的目标是让第二行“subms”显示在每一行下方。但是，它应该只显示 subms 的 msparent === 到主行的里程碑 ID 或“element.milestoneid”的行。应隐藏所有其他行。有没有人对如何做到这一点有任何建议或有更好的解决方案的建议？

这是我的 CSS，主要取自 Angular 网站上给出的示例。

    .mat-table {
  width: 100%;
}

.mat-header-cell, .mat-sort-header-sorted {

  color: black;

}

.mat-row {
  border-bottom: 0;
}

.mat-row:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, .1);
}

.subms-row {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  background-color: #fafafa;
  min-height: 0;
  overflow: hidden;
}

.majms-row:not(.expandedMs):hover {
  background: #f5f5f5;
}

.majms-row:not(.expandedMs):active {
  background: #efefef;
}

.majms-row {
  border-bottom-width: 0;
}

.subms-table {
  overflow: hidden;
  display: flex;
}

.ms-diagram {
  min-width: 80px;
  border: 2px solid black;
  padding: 8px;
  font-family: font-light;
  margin: 8px 0;
  height: 104px;
}

.ms-symbol {
  font-family: font-bold;
  font-size: 2em;
  line-height: normal;
}

.ms-description {
  padding: 16px;
}

.ms-description-attr {
  opacity: 0.5;
}