TypeScript模板方法中如何实现换行？使用\n不生效如何解决

问题根因 #

\n是TypeScript中合法的换行符，不生效的原因是HTML默认渲染规则限制：浏览器会默认将所有连续空白字符（包括换行符、制表符、多个空格）合并为单个空格展示，和TypeScript本身无关。

方案1：添加CSS识别换行符（改动最小） #

给展示文本的标签新增white-space: pre-line样式即可，该属性会保留文本中的换行符，同时自动折叠多余空格，符合常规文本展示需求，原有TS代码无需任何修改。
改动后的HTML代码：

<h1>Exercice 9 </h1>
<p style="white-space: pre-line;"> {{ figure() }} </p>

方案2：拼接HTML换行标签<br> #

如果需要更灵活的HTML控制，可以把换行符替换为<br>标签，同时在Angular中使用[innerHTML]绑定来渲染HTML内容，避免插值语法默认转义HTML标签。
改动后的TS代码：

export class AppComponent {

  constructor() {}

  public figure(): string {
    let txt = '';
    for (let i = 1; i < 11; i++) {
      txt = txt + i + ' <br> ';
    }
    return txt;
  }
}

改动后的HTML代码：

<h1>Exercice 9 </h1>
<p [innerHTML]="figure()"></p>

方案3：返回数组用ngFor遍历（符合Angular最佳实践） #

如果后续需要对单个数字做交互、样式定制，推荐直接返回数字数组，在模板中循环渲染，天然自带换行效果。
改动后的TS代码：

export class AppComponent {

  constructor() {}

  public figure(): number[] {
    return Array.from({length:10}, (_,i) => i+1);
  }
}

改动后的HTML代码：

<h1>Exercice 9 </h1>
<p *ngFor="let num of figure()">{{num}}</p>

内容的提问来源于stack exchange，提问作者user16922609