автоматическая корректировка строк таблицы матов при необходимости - PullRequest
Новая
       8

автоматическая корректировка строк таблицы матов при необходимости

0 голосов
/ 07 июля 2019

Я хочу настроить высоту строк таблицы matular6 в соответствии с содержимым (как вы можете видеть на прилагаемом рисунке).

Намерение всего этого: я хочу получить первоеСначала в ячейке DialectLanguage, затем 1- * соответствующие идентификаторы.Затем в той же ячейке я хочу перечислить все другие DialectLanguages ​​и их идентификаторы и так далее ...

ILLUSTRATION

<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, чтобы решить эту проблему?

Ответы [ 2 ]

1 голос
/ 07 июля 2019

Поскольку у кого-то может возникнуть такая же проблема в будущем, я опубликую свое окончательное решение. Спасибо @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>
1 голос
/ 07 июля 2019

Вы можете обернуть внутренний элемент в другой диапазон и добавить отображение стиля: блок; код. 

<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

Надеюсь, это поможет вам!

Ура!

...