如果需要，自动调整垫表行答案

【问题标题】：automatic adjustment of mat-table rows if needed如果需要，自动调整垫表行
【发布时间】：2019-07-07 22:45:42
【问题描述】：

我想根据内容调整 angular6 mat-table 的线条高度（如附图所示）。

整个事情的意图：我想首先在单元格中拥有第一个 DialectLanguage，然后是 1-* 对应的 ID。然后在同一个单元格中，我想列出所有其他 DialectLanguages 及其 Id 等等...

<div class="mat-elevation-z8">
  <mat-table [dataSource]="listData" matSort>
    <ng-container matColumnDef="germanEntry">
      <mat-header-cell *matHeaderCellDef mat-sort-header>German</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.germanEntry }} </mat-cell>
    </ng-container>

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

    <ng-container matColumnDef="references">
      <mat-header-cell *matHeaderCellDef mat-sort-header>References to other Languages</mat-header-cell>
      <mat-cell *matCellDef="let element">
                <span *ngFor="
            let item of element.reverseTranslations;
            let i = index;
            let isLast = last
          ">
         {{ item.reverseGerman2DialectLanguage }} <br >

          <span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList" let j="index;" let
            isInnerLast="last">
            {{ innerItem }}
            <!-- Comma and space will be appended to all entries except the last one : -->
            <span *ngIf="!isInnerLast">,&nbsp;</span>

          </span>
        </span></mat-cell>
    </ng-container>

 // 
  </mat-table>
</div>

此时对应单元格的新条目在单元格已满时向右移动。

作为 CSS 新手，我可以做些什么来解决这个问题？

【问题讨论】：

标签： css angular mat-table

【解决方案1】：

您可以将内部项目包装到另一个跨度并添加样式 display:block;代码。

<span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList" let j="index;" let isInnerLast="last">
  {{ innerItem }}
  <!-- Comma and space will be appended to all entries except the last one : -->
      <span *ngIf="!isInnerLast">,&nbsp;</span>
</span>

我在这里创建了一个示例来帮助你更多。

http://plnkr.co/edit/ZOi00Rpa5Vl7GmrjvkN3?p=preview

希望对你有帮助！

干杯！

【讨论】：

感谢您的回答。它对我找到最终解决方案帮助很大

【解决方案2】：

由于将来有人可能会遇到同样的问题，我将发布我的最终解决方案。感谢@itsmeniel，他帮助我找到了正确的方向！

对其他语言的引用 {{ item.reverseGerman2DialectLanguage }}：

      <span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList; last as isInnerLast">
        {{innerItem}}
        <!-- Comma and space will be appended to all entries except the last one : -->
        <span *ngIf="!isInnerLast">,&nbsp;</span>

      </span>
    </span>
  </mat-cell>
</ng-container>

【讨论】：