angular - Angular 7 マテリアルは、mat-table 内に mat-table データを動的に表示します (2 行目)

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」が各行の下に表示されるようにすることです。ただし、サブムの msparent がプライマリ行のマイルストーン ID または「element.milestoneid」と === である行のみを表示する必要があります。他のすべての行は非表示にする必要があります。それを行う方法についての提案や、より良い解決策を念頭に置いている提案はありますか?

これは、主に Angular サイトで提供されている例から取られた私の CSS です。

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