Angular 获取 Json 对象并用 HTML 显示它

Question

我有 json 个这样的对象：

{
    "cartId": 1,
    "cartName": "Cart",
    "CartItems": [
        {
            "productId": 1,
            "product": {
                "productId": 1,
                "productName": "milk",
                "price": 3.0,
                "categoryId": 1,
            },
            "price": 3.0,
            "quantity": 4,
            "subTotal": 12.0
        },
        {
            "productId": 2,
            "product": {
                "productId": 2,
                "productName": "oranges",
                "price": 3.0,
                "categoryId": 5,
       
            },
            "price": 3.0,
            "quantity": 6,
            "subTotal": 18.0
        }
    ],
    "grandTotal": 30.0
}

这是我的服务：

getCart(): Observable<Cart[]> {

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl)
    .pipe(
      retry(1) 
    );
 }

这是我的组件：

cart$: Observable<Cart[]>;

constructor(private cart_Service: CartService,private http: HttpClient) {
 }

ngOnInit() {

    this.loadCart();
 }

loadCart() {
  
    this.cart$ = this.cart_Service.getCart();

 }

我想在 cart.component.html 文件中像这样捕获 grandTotal:

<p *ngIf="!(cart$ | async)"><em></em></p>

<table class="table table-sm table-hover" >
  <thead>
    <tr>
      <th> Grand Total</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of (cart$ | async)">
      <td>{{ i.grandTotal }}</td>
    </tr>
  </tbody>

但我收到错误提示“NgFor 仅支持绑定到 Iterables，例如 Arrays。” 我尝试了不同的解决方案来将我的 json 对象转换为打字稿数组，但其中 none 很有帮助。有人可以帮我捕捉 grandTotal 并在我的网站 api 中用 html 显示它吗？我认为我们应该有数组才能得到那个 grandTotal。

Answer 1

你可以试试这个

return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl)
.pipe(
  map(response => response as unknows as Cart[])
  retry(1) 
);

或

将响应映射为购物车[]

Answer 2

我终于可以解决这个问题了。这是我的服务

getCart(): Observable<Cart[]> {

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl);
}

这是我的组件：

my_data: any;

public loadCart() {
   
    this.cart_Service.getCart().subscribe((data: Cart[]) => this.my_data = data);
}

这是我的 HTML:

<div>
   <p> Grand Total : {{ my_data.grandTotal }} </p>
 </div>

Angular 获取 Json 对象并用 HTML 显示它

Angular get Json Object and display it with HTML

html

json

angular

typescript

ngfor