Angular：防止模板中出现额外的空格

Question

我有一个 html 模板，它应该简单地转换一个状态：

<ng-container [ngSwitch]="currentStatus">
  <ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
    Draft
  </ng-container>
  <ng-container *ngSwitchCase=    ...
  <ng-container *ngSwitchDefault>
    {{currentStatus}}
  </ng-container>
</ng-container>
. End

但无论我怎么尝试，内容总是显示为例如Draft . End。即在容器末尾添加一个额外的 space。我会喜欢像 Draft. End.

那样显示

尝试在 compontent 中使用设置 preserveWhitespaces: false, 也无济于事。

任何提示如何摆脱这个额外的space？

Answer 1

您可能不喜欢这种格式（或者您可能在保存设置时设置了自动格式，必须以某种方式将其禁用），但这应该可以解决问题：

<ng-container [ngSwitch]="currentStatus">
  <ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
    Draft</ng-container>
  <ng-container *ngSwitchCase=    ...
  <ng-container *ngSwitchDefault>
    {{currentStatus}}
  </ng-container>
</ng-container>. End

Answer 2

你一定有一个你看不到的白色space。为确保您可以将您的话包装在 <span> 中，例如：

...
<ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
   <span>Draft</span>
</ng-container>
...
<span>. End</span>

并确保您的标签之间没有 space

Angular：防止模板中出现额外的空格

Angular: Prevent additional whitespaces in template

angular2-template

angular