显示 Json object 属性

Question

在我的应用程序中，我有 json 数组，我可以显示这些数据。 所有数据都有单选按钮。 我想要的是当我单击单选按钮时，该 json 数组项的数据将以 html 格式打印在另一个组件中。 像下面的东西。 这就是它的显示方式

使用我的 product.component.ts 我在下面。

ngOnInit() {
   this.wordpressService.apiCall().subscribe((data)=>{
     console.warn("get api data ",data);
     this.title=data;
   })
}
radioHandle(event : any){
     this.post=event.target.value;
  }

然后在我的 product.component.html 中显示一些 json 数据，如下所示。

<div class='container'>
  <div id="leftDiv">
   <div *ngFor="let data of title">
    <p>
      <input type="radio"
      name="posts"
      value="{{data | json}}"
      (change)="radioHandle($event)">
      {{data.id}}
    </p>
  </div>
</div>
<div id="rightDiv">
  <app-productDisplay [parentData]=post></app-productDisplay>
</div>
</div>

现在我想将选定的数据传递给另一个组件调用 productDisplay.component.ts

 @Input() public parentData: any;

并显示productDisplay.component.html中的数据

{{parentData}}

有用。 但问题是显示 json object。 但我想打印 json object 而不是整个 json 的一些属性

Answer 1

您是否尝试过 JSON.parse()？ 我想这可以做你描述的。

在您的 productDisplay.component.ts 中：

let parentDataParsed = JSON.parse(parentData)

在您的模板中：

{{parentDataParsed.Id}}

Answer 2

您必须首先在 product.component.ts 中解析 JSON

ngOnInit() {
   this.wordpressService.apiCall().subscribe((data)=>{
     console.warn("get api data ",data);
     this.parentDataParsed = JSON.parse(data)
   })
}

通过数据绑定将数据传递给productDisplay组件

<app-product-display [parentData]="parentDataParsed"></app-product-display>

在 productDisplay 组件中，您可以显示单个字段

<p>ID: {{parentData?.id}}</p>
<p>TITLE: {{parentData?.title}}</p>
....