Angular 5：如何等待服务异步请求完成后渲染页面数据？

你遇到的问题核心有两个：异步请求的时序问题，以及你的服务方法设计不符合Angular异步数据流的规范。咱们一步步来修复：

1. 先修复product.service.ts的方法 #

你的服务里直接在方法内部subscribe了HTTP请求，这会导致两个关键问题：

• subscribe是异步执行的，方法会直接返回undefined（因为你没写有效的return语句，默认返回undefined）
• 把订阅逻辑硬编码在服务里，组件无法控制数据流的生命周期，也没法使用async管道简化操作

修改后的服务方法应该返回一个Observable，把数据转换逻辑交给map操作符处理：

// 记得导入必要的操作符和类型
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

getAllProductsFromACategory(categoryName: string): Observable<Article> {
  // 注意URL里的空格要去掉，避免请求失败
  return this.http.get(`http://localhost:8080/VespaWebshopAPI/api/Article/Category?categoryName=${categoryName}`)
    .pipe(
      map(data => {
        // 这里处理数据转换，返回单个Article对象
        return {
          id: data[0].id,
          name: data[0].name,
          articleNr: data[0].articleNr,
          stock: data[0].stock,
          price: data[0].price,
          description: data[0].description
        } as Article;
      })
    );
}

2. 方案一：在组件中手动订阅并赋值（适合需要在组件内处理数据的场景） #

修改product-list.component.ts，把异步请求逻辑移到ngOnInit钩子（不要在构造函数里做异步操作，这是Angular的最佳实践）：

import { OnInit } from '@angular/core';

export class ProductListComponent implements OnInit {
  public article: Article | undefined;

  constructor(private route: ActivatedRoute, private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getAllProductsFromACategory('Bremsen')
      .subscribe(article => {
        this.article = article;
      });
  }
}

然后模板里用安全导航操作符?.，避免数据未加载完成时触发报错：

{{ article?.id }}
{{ article?.name }}
<!-- 其他属性同理 -->

3. 方案二：使用async管道（更推荐，自动管理订阅生命周期） #

这种方式不需要手动订阅/取消订阅，Angular会帮你自动处理，代码更简洁：

先修改组件中变量的类型为Observable<Article>（用$后缀标识Observable是Angular社区的通用最佳实践）：

import { Observable } from 'rxjs';

export class ProductListComponent {
  public article$: Observable<Article>;

  constructor(private route: ActivatedRoute, private productService: ProductService) {
    this.article$ = this.productService.getAllProductsFromACategory('Bremsen');
  }
}

然后模板里有两种高效写法：

• 写法一：用安全导航符配合async

{{ (article$ | async)?.id }}
{{ (article$ | async)?.name }}

• 写法二：用*ngIf提前判断，避免重复订阅（性能更优）

<div *ngIf="article$ | async as article">
  {{ article.id }}
  {{ article.name }}
  {{ article.articleNr }}
  <!-- 其他属性按需添加 -->
</div>

额外注意点 #

• 你原来的API URL里有个多余的空格VespaWebshopAPI /api，记得去掉，否则会导致请求失败
• 如果API返回的是商品数组，你想展示多个商品的话，只需把服务返回类型改成Observable<Article[]>，然后模板里用*ngFor="let item of article$ | async"即可

内容的提问来源于stack exchange，提问作者ConanCode