必要時自動調整席子表行

Question

我想根據其內容調整angular6墊子表的線條的高度（如您在附圖中所見）。

整個過程的意圖：我想首先在單元格中擁有第一個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的新手，我可以做什么來解決此問題？

Answer 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

希望對您有幫助！

干杯!

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