Question

我正在尝试通过REST使用angular 2 HttpClient

获取数据

basket.component.ts

 ngOnInit() {
    this.cart = this.shoppingCartService.get();
    this.cartSubscription = this.cart.subscribe((cart) => {
           this.itemCount = cart.items
              .map((x) => x.quantity)
              .reduce((p, n) => p + n, 0);

           this.cartItems = cart.items.map((item) => {
              let product = {};
              product = this.productsService.find_p(item.productId);
              return {...item,product}
           });
    });
}

basket.component.html

  <tbody *ngIf='cartItems'>
    <tr *ngFor="let item of cartItems">
      <td>
        <i class="fa fa-trash-o" aria-hidden="true" (click)='removeItem(item.productId)' style="font-size: 21px;color:red;"></i>
      </td>
      <td>
        <img class="uk-preserve-width uk-border-circle" src="assets/images/fish.png" width="40" alt="">
      </td>
      <td class="uk-table-link">
        <a class="uk-link-reset" *ngIf='item.product.product' href="">{{ item.product.product.name }}</a>
      </td>
      <td class="uk-text-nowrap">{{ item.quantity }}</td>
      <td class="uk-text-nowrap">۲۵۰۰۰ هزارتومان</td>
      <td class="uk-text-nowrap">ZF-3268</td>
    </tr>
  </tbody>

但我无法获取结果我认为我的回调数据是文字而不是json但我不知道如何解决它

on inspect元素

错误类型错误：无法读取未定义的属性“产品”

产品日志

产品：Observable运算符：CatchOperator {selector：ƒ，catch： Observable} source：Observable {_isScalar：false，source：Observable，运算符：MapOperator} _isScalar：false proto ：对象

和我的产品服务

 find_p(id) {
    let url: string = `${this.BASE_URL}/product/${id}.json`;
    return this.http.get(url, {headers: this.headers}).map((res:Response) => res.json() as [{}] )
    //...errors if any
    .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

当我这样做时，.json（）方法已被解决，但另一个错误弹出

在Promise或observable类型上不存在属性结果

Answer 1

您的代码问题 find_p返回Observable而不是产品数据

product = this.productsService.find_p(item.productId);

您正在使用product作为模板方面的数据。

解决方案：

替换此代码块

this.cartItems = cart.items.map((item) => {
    let product = {};
    product = this.productsService.find_p(item.productId);
    return {...item,product}
});

使用：

let observerArray = [];
cart.items.forEach((item) => {
    observerArray.push(this.productsService.find_p(item.productId));
});

Observable.forkJoin(observerArray).subscribe(products => {
   this.cartItems = cart.items.map((item,index) => {
        return {...item,product : products[index]}
    });
});

无法在角度上获取休息结果

1 个答案: