Angular 组件视图未使用来自服务的最新 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.logs 来尝试追踪这个，但我似乎无法理解为什么视图似乎只使用以前的服务调用响应而不是那个刚刚被触发。

产品组件视图如下：

<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 方法是异步的，这意味着您 return 甚至在 fetched/resolved/api 完成之前就得到了结果。因此，要修复您可以在 ngOnChanges 内订阅并将您的服务更改为 return 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);    
}

Angular 组件视图未使用来自服务的最新 API 响应

Angular Component view not using the latest API response from service

api

service

components

updating

angular