如何在Angular模板中构建JSON值？

首先直接给结论：你当前用模板字面量拼接的写法不可行，因为拼出来的不是合法的JSON格式，而且就算调整格式，这种写法也不是最优解。

为什么你的写法不行？ #

你当前的模板字面量代码拼出来的结果是类似 id: 'bla', field: 'other' 的字符串，既没有外层大括号，键名也没有加双引号——这完全不符合JSON的语法规范，就算你手动加上大括号变成 { id: 'bla', field: 'other' }，JSON的键名必须用双引号包裹，所以这个字符串依然无法被JSON.parse正确解析。

正确的实现方式 #

方案1：组件内处理（推荐）

Angular的设计原则是模板尽量只做数据展示，逻辑放在组件类中，所以最规范的做法是在组件里提前组装好需要的对象或JSON字符串：

// 组件类中
otherParam = 'other'; // 假设这是你的参数

getOptionValue(option: any): string {
  // 组装对象并转为JSON字符串
  return JSON.stringify({
    id: option.id,
    field: this.otherParam
  });
}

然后在模板中直接调用这个方法：

value="{{ getOptionValue(option) }}"

这样得到的value就是标准的JSON字符串：{"id":"bla","field":"other"}，后续可以正常用JSON.parse解析。

方案2：模板内直接处理（不推荐，但可实现）

如果一定要在模板里处理，你不需要手动拼接字符串，直接用JSON.stringify处理组装好的对象即可——前提是你已经在组件类中定义了JSON = JSON，让模板能访问全局JSON对象：

<!-- 组件类已定义 JSON = JSON -->
value="{{ JSON.stringify({ id: option.id, field: otherParam }) }}"

这种写法会直接生成合法的JSON字符串，不需要自己拼接模板字面量，避免了格式错误的问题。

关于你尝试的JSON.parse的问题 #

你之前用JSON.parse是搞反了逻辑：我们需要先把对象转为JSON字符串（用JSON.stringify）赋值给value，而不是把字符串解析成对象——因为value属性本身是字符串类型，就算你解析成对象，模板也会把它转成[object Object]这样的字符串，完全不符合需求。

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