Angular单选按钮选中JSON项如何在子组件展示指定属性而非完整对象？

第一步：优化父组件单选按钮值绑定（推荐，更符合Angular开发规范） #

你当前通过json管道把数组项转成了字符串存在单选按钮的value中，因此拿到的post是JSON字符串而非可直接读取属性的对象，建议直接绑定原始对象：
修改product.component.html里的单选按钮代码，把value="{{data | json}}"替换为[value]="data"：

<input type="radio"
  name="posts"
  [value]="data"
  (change)="radioHandle($event)">

此时radioHandle方法中拿到的event.target.value就是完整的JSON对象，无需额外格式转换。

第二步：子组件渲染指定属性 #

在productDisplay.component.html中直接通过点语法读取对象的指定属性即可，建议加可选链?.避免初始无值时抛出报错：
比如需要展示id、产品名称、产品描述三个属性，代码示例如下：

<div class="product-card">
  <h2>产品ID：{{parentData?.id}}</h2>
  <p class="product-name">产品名称：{{parentData?.name}}</p>
  <div class="product-desc">产品描述：{{parentData?.description}}</div>
</div>

你可以根据实际的JSON字段名，替换上述代码中的name、description等属性名即可。

兼容方案（无需修改父组件现有逻辑） #

如果你不想改动父组件的现有代码，也可以在子组件中先把接收到的JSON字符串转成对象再读取属性：
修改productDisplay.component.ts代码：

@Input() public parentData: any;
// 声明解析后的产品对象
public productItem: any;

// 监听输入值变化，自动解析JSON字符串
ngOnChanges() {
  if(this.parentData) {
    this.productItem = JSON.parse(this.parentData);
  }
}

之后在子组件模板中用{{productItem?.属性名}}的格式渲染即可。

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