简体   繁体   English

必要时自动调整席子表行

[英]automatic adjustment of mat-table rows if needed

I want to adjust the height of the lines of an angular6 mat-table to the content (as you can see in the attached graphic). 我想根据其内容调整angular6垫子表的线条的高度(如您在附图中所见)。

Intention of the whole thing: I want to have the first DialectLanguage in the cell first, followed by 1-* corresponding ids. 整个过程的意图:我想首先在单元格中拥有第一个DialectLanguage,然后是1- *对应的ID。 Then in the same cell I want to list all other DialectLanguages and their Ids and so on... 然后在同一单元格中,我要列出所有其他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>

At the moment new entries of the corresponding cells are moved to the right when the cell is full. 此刻,当单元格已满时,相应单元格的新条目将移至右侧。

What can I do as a newbie in CSS to solve this problem? 作为CSS的新手,我可以做什么来解决此问题?

you may wrap inner item to another span and add style display:block; 您可以将内部项目包装到另一个范围,并添加样式display:block; code. 码。

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

I created a sample here to help you more. 我在这里创建了一个示例以帮助您更多。

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

Hope it helps you! 希望对您有帮助!

Cheers! 干杯!

As somebody may have the same problem in the future, I am going to post my final solution. 由于将来有人可能会遇到相同的问题,因此我将发布最终解决方案。 Thanks to @itsmeniel, who helped me to the right direction! 感谢@itsmeniel,他帮助我朝着正确的方向前进!

References to other Languages {{ item.reverseGerman2DialectLanguage }}: 对其他语言的引用{{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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM