向打字稿中的字符串添加空格（角度）答案

【问题标题】：Adding whitespace to a string in typescript (in angular)向打字稿中的字符串添加空格（角度）
【发布时间】：2025-11-22 21:15:01
【问题描述】：

我的一个组件中有一个方法，每当我点击一个按钮时，它就会在我的 html 页面中被调用。我目前正在尝试格式化页面，以便某些属性（即城市和州）出现在固定位置这页纸。这是我目前所拥有的：

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for ( let i = 0; i < test; i++) {
       result += ' ';
   }
   return result + this.state;
}

但是，而不是看到像城市这样的东西：

                                       (41 extra spaces) Grapevine TX

它看起来像城市：

Grapevine TX.

有趣的是，只要不是空格，就会添加额外的字符。例如，如果我写了 result += 'a'，那么我会在字符串中看到 41 个额外的 a。

使用 result += 'a' 示例，如果我写了行 result = result.replace(/a/g, ' ')，那么最终输出将是 City: Grapevine TX。但是，如果我最初写了 result += ' '，然后写了 result = result.replace(/ /g, 'a')，那么即使额外的空格不会出现在原始字符串中，这些空格也会被替换为一个'a'。

如何在字符串中添加额外的空格？

【问题讨论】：

尝试添加而不是空格
HTML 省略了多个空格。除非你使用非易碎的。但是，我怀疑您最好使用 CSS 和/或其他格式来解决此问题。
您可以像这样将空格添加为 html 字符实体：
&nbsp; 可能不会被编码到实际的不间断空间中（对于 angular 的某些字符串编码安全方面），unicode escape codes 会更好。

标签： javascript angular typescript

【解决方案1】：

您的问题与 html 有关，它在另一个空格之后省略了多个空格。 Angular 不是根本原因。

纯 html 示例 - 两个标题均等显示：

<h1>test     test<h1> 
<h1>test test<h1>

解决方案：使用标签和/或 CSS 来布局你的输出。

【讨论】：

除了 &nbsp 之外，没有办法在 html 中的另一个空格之后放置多个空格（b/c 我正在尝试使数量可变）

【解决方案2】：

你可以试试&nbsp;而不是' '

【讨论】：

我写的代码在 .ts 文件中，而不是在 html 文件中。

【解决方案3】：

正如人们在其他答案中对您发表的评论一样，您的问题在于 html。我建议您在代码中添加&nbsp; 而不是' '。

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for (let i = 0; i < test; i++) {
       result += '&nbsp;';
   }
   return result + this.state;
}

或者，如果您愿意，可以将字符串结果嵌入到<pre></pre> 标签中。

您可以查看此页面https://www.wikihow.com/Insert-Spaces-in-HTML 了解更多信息。

【讨论】：

我正在编写的代码在 .ts 文件中，而不是在 html 文件中。另外，我尝试根据您之前所说的编辑我的代码，但没有成功。假设我在 html 文件中编写代码，您是否说出了答案？
您是否尝试过将变量与 innerHtml 标签绑定？喜欢

【解决方案4】：

尝试在你的 css 中使用下一个代码：

.pre-class {
    white-space: pre;
}

但要小心 - 文本将按原样显示，所有空格和新行！

【讨论】：

【解决方案5】：

即使字符串中有多余的空格，html 也不会渲染多余的空格。您可以获取所需的空格数并在任何需要的地方循环 html。经过测试，它可以工作。

<span *ngFor="let i of whitespacecount">&nbsp;</span>

【讨论】：