Angular 4中如何移除来自JSON的innerHTML内容中的逗号？

嘿，我来帮你搞定这个问题！你遇到的逗号其实是因为answer是一个数组，直接用innerHTML绑定的时候，Angular会默认把数组转成字符串，元素之间自动加了逗号分隔符。下面给你两种简单的解决办法：

方法一：创建自定义管道（推荐，复用性强） #

自定义管道可以让你在模板里直接处理数组，不用每次都在组件里写重复逻辑。

1. 生成自定义管道
   在终端运行命令快速创建管道：

   ng generate pipe removeComma
   

2. 实现管道逻辑
   打开生成的remove-comma.pipe.ts文件，修改transform方法，把数组元素用空字符串拼接（这样就不会产生逗号分隔符）：

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'removeComma'
   })
   export class RemoveCommaPipe implements PipeTransform {
     transform(value: any[]): string {
       // 先判断是否为数组，再拼接成无逗号的字符串
       return Array.isArray(value) ? value.join('') : value;
     }
   }
   

3. 在模板中使用管道
   在组件模板里，给innerHTML绑定加上我们的自定义管道：

   <div [innerHTML]="data.answer | removeComma"></div>
   

方法二：在组件类中预处理数据 #

如果不需要复用处理逻辑，直接在组件里把数组拼接好再绑定也很方便：

1. 在组件中处理数据
   假设你已经获取到了目标JSON数据，在组件类里提前把answer数组拼接成完整字符串：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-question',
     templateUrl: './question.component.html'
   })
   export class QuestionComponent implements OnInit {
     data: any;
     processedAnswer: string;
   
     ngOnInit() {
       // 模拟获取JSON响应数据
       this.data = { 
         "qno": 1, 
         "question": "What is HTML5? And, what are the new features?", 
         "answer": [ "<p>HTML is a markup language designed for processing, defining, presenting and formatting the text. The HTML5 is the latest version and has features like:</p>", "<ul class=\"none\"><li>Local Storage</li>", "<li>New form elements like date, time, url, range, color</li>", "<li>Canvas for 2D drawing</li>", "<li>Media elements like audio and video</li>", "<li>New semantic elements like, <code>nav</code>, <code>header</code>, <code>footer</code>, <code>section</code> and <code>article</code></li>", "<li>Local storage and Session storage instead of cookies.</li></ul>" ] 
       };
       // 拼接数组，去掉自动生成的逗号
       this.processedAnswer = this.data.answer.join('');
     }
   }
   

2. 在模板中绑定处理后的字符串
   直接绑定预处理好的字符串即可：

   <div [innerHTML]="processedAnswer"></div>
   

效果展示 #

用上面任意一种方法处理后，innerHTML渲染出来的内容就不会有数组元素之间的逗号了，HTML会正常解析成段落和列表：

注意：如果你的HTML内容里本身带有逗号（比如示例中"New semantic elements like,"里的逗号），这些是内容自带的，上面的方法不会移除它们，只会移除数组转字符串时Angular自动添加的分隔逗号。

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