Question

我正在关注一个有2个用例的教程

从json文件中获取列表产品
通过传递产品ID获取所点击产品的详细信息。

第一部分工作正常。但是，当我点击产品时，服务类不会返回任何结果。有时服务类会返回值，但会抛出其他时间：

Error: Error in ./ProductDetailComponent class ProductDetailComponent - inline template:31:22 caused by: Cannot read property 'productName' of undefined
TypeError: Cannot read property 'productName' of undefined

在调试问题时，我可以看到productId已成功传递到服务层。这是一个非常简单的实现，不确定它为什么不起作用。服务类看起来像这样：

private url: string = 'api/products/products.json';
  private product: IProduct;
  constructor(private http: Http){}


  getProducts(): Observable<IProduct[]> {
    return this.http.get(this.url)
            .map((response: Response) => <IProduct[]> response.json())
            .do(data => console.log('All: '+JSON.stringify(data)))
            .catch(this.handleError);
  }

  getProduct(id: number): Observable<IProduct> {
    console.log("Id in service class: "+id)
    return this.getProducts()
      .map((products: IProduct[]) => products.find(p => p.productId===id));
  }

可以找到其余代码here。

Answer 1

您需要将this.cd.markForCheck();放在ProductDetailComponent here的getProduct函数中;你可能会问，什么是CD？为什么需要cd.markForCheck？请参阅this article。

Answer 2

您似乎需要在模板?.

中使用安全导航操作符

这是因为请求的异步性质。

因此，在您的模板中，您会将看似model.productName的内容更改为model?.productName。

Answer 3

服务中

服务名称：GetProductService

getProduct(id: number) {
try {
  const url = `${this.url}/${id}`;
  return new Promise((resolve, reject) =>
  this.http.get<Product>(url)
      .subscribe(response => {
          resolve(response);
        },
        error => {
          reject(error);
        }));
  }catch (exception) {
    console.log(exception.message);
  }
}

interface Product {
productId: number;
  .....
}

在TypeScriptFile中

private getProduct: GetProductService

SelectedProduct: Product = {productId: 0, title: ''... };

    try {
        const promise = this.getSiteOffice.getSiteOfficeDetails(this.siteOfficeId);
        promise.then(response => {
           this.SelectedProduct.productId = response['productId'];
           ...
        });
    }catch (exeption) {
      console.log(exeption.message);
    }

interface Product {
    productId: number;
    .....
}

Angular 2：服务没有返回值

3 个答案: