如何在Angular的NgFor插值中拼接字符串与数组

实现思路 #

你的value2是字符串形式的数组字面量，并非真正的数组对象。要在模板中直接处理，需要先移除首尾的方括号，再将value3与处理后的value2内容用逗号拼接。

模板代码实现 #

直接在NgFor循环的表格中使用Angular模板表达式处理：

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of temp">
      <td>{{ item.value1 }}</td>
      <td>
        {{ item.value3 }}, {{ item.value2.slice(1, -1) }}
      </td>
    </tr>
  </tbody>
</table>

代码说明 #

• item.value2.slice(1, -1)：通过字符串的slice方法移除value2首尾的方括号（索引1到倒数第1位），得到a, b, c, d, e这样的内容。
• 直接用逗号连接item.value3和处理后的value2内容，就能得到你需要的格式。

特殊情况处理（可选） #

如果value2可能为空字符串或者格式不标准（比如没有方括号），可以添加简单的判断避免错误：

<td>
  {{ item.value3 }}{{ item.value2 ? ', ' + item.value2.slice(1, -1) : '' }}
</td>

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