訪問 Json Object 使用 angular ZFC35FDC70D5FC69D269883A8E 模板從快速 js 返回

Question

我正在嘗試從 angular html 模板訪問 JSON 。 但它沒有返回結果。 通過修改代碼簡單地顯示 Object 或錯誤。

服務器.js

response.status(200).json(results.rows);

product.component.ts

export class ProductsComponent implements OnInit {
  products = {};
  usersJson: any[]=[];

  constructor(private service: Service) {

   }

  ngOnInit(): void {
    this.service.getResult().subscribe((data: JSON)=>{
      console.log(data);
      this.products = data;
      this.usersJson = Array.of(data);
      console.log(this.products);
    }) 
  }

數據

data = [
 {product_id: 1, product_name:"Phone"},
 {product_id: 2, product_name:"laptop"}
]

product.component.html

<p>{{ products}}</p>
<h1>Product</h1>
<p>{{ products[0].product_id}}</p>
<p>{{usersJson[0]}}</p>
<p>{{usersJson[0].product_id}}</p>

Answer 1

嘗試使用json pipe和 '.?' 符號以確保未定義字段不會出現問題：

<p>{{ products | json }}</p>
<h1> Product </h1>
<p>{{ products[0] != null ? ( products[0]?.product_id | json ) : 'N/A' }}</p>
<p>{{ usersJson[0] != null ? ( usersJson[0] | json ) : 'N/A' }}</p>
<p>{{ usersJson[0]?.product_id }}</p>

注意：如果 product_id 是數字/字符串而不是 object，請更改

( products[0]?.product_id | json ) 

至

( products[0]?.product_id )  [just delete the json pipe in that line]