Angular Component视图未使用服务的最新API响应

Question

我有一个父组件（导航栏），它将@Input传递给我的子组件（产品）。

Navbar组件具有一个事件，该事件订阅了单击，以确定是否正在单击Nav上的元素。单击的Nav元素中的文本通过@Input传递到子组件中。即选择的产品是啤酒=> @Input productType = 'Beer'

<product [productType]="selectedProduct"></product>

产品组件实现ngOnChanges，这是我使用传入的'productType'调用具有正确字符串的服务的地方。

ngOnChanges(changes: SimpleChanges) {
    this.result = this.productService.getProducts(changes.productType.currentValue);    
  }

每次单击导航项时都会调用预期的产品服务，但是该组件似乎总是呈现以前的结果而不是当前的结果。

我的服务电话如下：

getProducts(productType: string): Observable<any> {
  this.http.get(this.baseUrl + 'api/test/' + productType).subscribe(result => {
    this.result = result;
  }, error => console.error(error));  
  return this.result;
}

我几乎将console.log放到任何地方尝试跟踪此问题，但是我似乎无法理解为什么仅使用先前的服务调用响应而不是刚刚触发的视图来更新视图。

下面可以看到产品组件视图：

<p class="info" *ngIf="!result">Please choose a product</p>
<ul class="products" *ngIf="result">
  <li class="product" *ngFor="let item of result.Items">
    <div class="productName">
      <p>{{item.Name}}</p>
    </div>
    <img src="{{ item.Image }}">
    <div class="productPrice"><p>£{{ item.Price }}</p></div>
  </li>
</ul>

我已经尝试将服务调用移至父组件并内联子组件。即使使用Navbar组件中的所有本地内容，我仍然会得到相同的行为。

我已经阅读了很多有关ngOnChange事件的信息，并且相信它可以按预期工作。我已经尝试过用标志来尝试迫使视图重新呈现，但这也不起作用。

Answer 1

这里getProducts方法是异步的，这意味着您甚至在未获取/解析/ api完成之前就返回结果。因此，要解决此问题，您可以在ngOnChanges内部订阅并更改您的服务以返回Observable代替

 getProducts(productType: string): Observable<any> {
      return this.http.get(this.baseUrl + 'api/test/' + productType);
 }

ngOnChanges(changes: SimpleChanges) {
    this.productService.getProducts(changes.productType.currentValue).subscribe((result) => this.result = result);    
}