保留mat-table中的空白区域

Question

<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”。我该如何保留空间？

Answer 1

我能够通过添加class =＆＃34; pre＆＃34;来解决问题。使用Tachyons。

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