使用 Angular 在表的 <td> 中保留前导空格答案

【问题标题】：Preserve leading whitespace within a <td> of a table using Angular使用 Angular 在表的 <td> 中保留前导空格
【发布时间】：2020-07-17 16:30:13
【问题描述】：

我正在使用带有 Angular 和 Metronic (https://preview.keenthemes.com/metronic/demo1/index.html) 的项目，我需要将一些信息放在表格中，这些信息是以空格开头的单词，我需要打印这些空格，但是表中的文字做了修饰。

这是我的代码：

    <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

【问题讨论】：

标签： html angular pipe

【解决方案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; 添加到其中。

【讨论】：

感谢您的完整回答。效果很好。
@MateusKern 很高兴我能帮上忙！请考虑通过单击我的答案左侧的复选标记来接受我的答案:)

【解决方案2】：

您可以更改空白 CSS 值

td {
    white-space: pre-wrap;
}

【讨论】：