Angular中如何将JSON的Message字段多行显示？

在Angular项目里使用textarea通过[(ngModel)]绑定JSON字符串时，若要让Message字段实现多行显示，可通过以下两种方式解决：

方案一：预处理JSON字符串，替换转义换行符 #

在将JSON数据绑定到textarea之前，先把JSON字符串中Message字段里的转义换行符（\n）替换为实际的换行符：

// 示例数据
const rawData = {
  Message: "第一行消息\n第二行消息\n第三行消息",
  Code: "200",
  Status: "Success"
};

// 格式化JSON并替换换行符
this.displayJson = JSON.stringify(rawData, null, 2).replace(/\\n/g, '\n');

模板中绑定处理后的字符串：

<textarea [(ngModel)]="displayJson" rows="12" cols="60"></textarea>

方案二：自定义Angular管道复用换行替换逻辑 #

如果多个地方需要处理类似场景，可创建自定义管道统一处理：

1. 生成管道文件：

ng generate pipe newline-converter

2. 实现管道转换逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'newlineConverter'
})
export class NewlineConverterPipe implements PipeTransform {
  transform(jsonStr: string): string {
    if (!jsonStr) return jsonStr;
    // 匹配并替换所有转义换行符，包含\r\n的情况
    return jsonStr.replace(/\\r?\\n/g, '\n');
  }
}

3. 在模板中直接使用管道：

<textarea [(ngModel)]="rawJsonStr | newlineConverter" rows="12" cols="60"></textarea>

额外注意事项 #

• 调整textarea的rows属性值，确保有足够空间展示多行内容
• 若JSON中的换行符是其他格式（比如\\r\\n），可调整正则表达式匹配规则

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