Материал Angular 7 динамически отображает данные мат-таблицы внутри мат-таблицы (вторая строка) - PullRequest
Новая
       35

Материал Angular 7 динамически отображает данные мат-таблицы внутри мат-таблицы (вторая строка)

1 голос
/ 16 марта 2019

Я пытаюсь построить матричную таблицу с возможностью расширения строки, где дополнительные строки могут отображаться внутри строк мат-таблицы.Я последовал примеру для расширяемых строк, однако я хочу, чтобы вторичная таблица всегда была установлена ​​как «расширенная».Я могу отобразить дополнительную строку, но таблица не отображается должным образом, и я считаю, что это потому, что я не извлекаю вторичные данные правильно.Вот мой 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 для subms равно === значению milestoneid основной строки или "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;
}
...