매트 테이블의 공백 유지

<div> 
<mat-table #table [dataSource]="dataSource" > 
<!-- Name Column --> 
<ng-container matColumnDef="name"> 
    <mat-header-cell *matHeaderCellDef > Name </mat-header-cell> 
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> 
</ng-container> 
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
</mat-table> 
</div>

이름이 "6xxxxxx6xxxxxx"입니다. "x"는 공백을 나타냅니다. 공백이있는 이름을 표시하고 싶습니다. 위의 코드는 표시 될 때 여분의 공백을 제거했습니다. 디스플레이에 "6x6"이 표시됩니다. 공간을 어떻게 보존 할 수 있습니까?매트 테이블의 공백 유지

출처

2017-11-20 user3097695

MatTable 5.0.0-rc0의 공백에는 아무런 문제가 없습니다. "let 요소"가 거기에 속하는지 확신 할 수 없습니다. 나는 모든 행에 "let row"를 써야한다고 생각하지만 이것을 연구하지는 않았다. – Preston

나는 이것이 : white-space : pre와 관련이 있다고 생각한다. 그러나, 나는 그것을 작동하게 할 수 없다. – user3097695

Tachyons를 사용하여 class = "pre"를 추가하여 문제를 해결할 수있었습니다.

<div> 
    <mat-table #table [dataSource]="dataSource" > 
     <!-- Name Column --> 
     <ng-container matColumnDef="name"> 
      <mat-header-cell *matHeaderCellDef > Name </mat-header-cell> 
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> 
    </ng-container> 
    <mat-header-row class="pre" *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row class="pre" *matRowDef="let row; columns: displayedColumns;"> 
    </mat-row> 
    </mat-table> 
    </div>

출처

2017-11-21 15:34:43 user3097695

답변

관련 문제