使用 Angular 在 table 的 <td> 中保留前导空格

Question

我正在使用 Angular 和 Metronic (https://preview.keenthemes.com/metronic/demo1/index.html) 的项目，我需要将一些信息放在 table 中，这些信息是以空格开头的单词我需要打印这些空格，但是 table 在单词中给出 trim。

这是我的代码：

    <table style="width:100%" class="table table-striped table-hover table-sm" [mfData]="list" #mf="mfDataTable">
   <thead>
    <tr class="bg-primary text-light">
     <th style="width: 10%"><mfDefaultSorter by="code">Code<i class="fa fa-sort"></i></mfDefaultSorter></th>
     <th style="width: 30%"><mfDefaultSorter by="desc">Desc<i class="fa fa-sort"></i></mfDefaultSorter></th>
    </tr>
   </thead>
   <tbody>
    <tr *ngFor="let item of mf.data | filterBy:['code', 'desc']:filterText; let i = index">
     <td>{{ item.code }}</td>
     <td>{{ item.desc }}</td>
    </tr>
   </tbody>
  </table>

结果大致是这样的：

enter image description here

Answer 1

将您的值包装在 <pre> 标记中将保留前导和尾随空格。

   <tbody>
    <tr *ngFor="let item of mf.data | filterBy:['code', 'desc']:filterText; let i = index">
     <td><pre>{{ item.code }}</pre></td>
     <td><pre>{{ item.desc }}</pre></td>
    </tr>
   </tbody>

请记住，这将防止这些值换行。如果您想让文本换行并保留空格，您可以创建一个 css 选择器并向其添加 whitespace: pre-wrap;。

Answer 2

可以更改白-spaceCSS值

td {
    white-space: pre-wrap;
}

使用 Angular 在 table 的 <td> 中保留前导空格

Preserve leading whitespace within a <td> of a table using Angular

html

pipe

angular