顯示 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>
....