使用Service获取数据时出现Angular未捕获Promise错误求助

错误根源 #

控制台报错NG02200的核心原因是：你在*ngFor中绑定的categories不是数组这类可迭代对象，而是一个Promise对象，Angular的NgFor无法遍历Promise。

具体代码问题：

1. categories.service.ts中的getCategories是async函数，所有async函数默认返回一个Promise，你在categories.page.ts中直接把this.categories赋值为这个Promise，导致模板遍历错误。
2. 服务中的getCategories内部订阅了HTTP请求，但仅把结果存在服务自身的categories属性中，没有将数据返回给页面组件，页面根本没拿到实际的分类数组。

修正方案（推荐两种方式） #

方式1：使用Observable + Async管道（Angular最佳实践）

这种方式无需手动管理订阅，由Angular的Async管道自动处理订阅与取消订阅，避免内存泄漏。

1. 修改categories.service.ts

import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
// ...其他导入

export class CategoriesService {
  constructor(
    private authService: AuthenticationService,
    private httpClient: HttpClient,
  ) { }

  getCategories(): Observable<any[]> {
    // 把Promise转为Observable，再串联HTTP请求
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
      switchMap(tokenRes => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${tokenRes.value}`);
        return this.httpClient.get<any[]>(`${environment.apiUrl}categories`, { headers });
      })
    );
  }
}

2. 修改categories.page.ts

import { Observable } from 'rxjs';
// ...其他导入

export class CategoriesPage {
  // 定义为Observable类型
  categories$: Observable<any[]>;

  constructor(private categoriesService: CategoriesService) {}

  ngOnInit() {
    this.categories$ = this.categoriesService.getCategories();
  }
}

3. 修改HTML模板

使用async管道直接遍历Observable：

<ion-col size="6" *ngFor="let category of categories$ | async">
  <div id="{{category.seo_url}}" class="card">
    <div class="card-overlay"></div>
    <div class="card-cat-title">
      <h4><a routerLink="/category/{{category.seo_url}}">{{ category.name }}</a></h4>
    </div>
  </div>
</ion-col>

方式2：使用Promise + async/await

如果更习惯Promise的写法，可以用这种方式：

1. 修改categories.service.ts

export class CategoriesService {
  constructor(
    private authService: AuthenticationService,
    private httpClient: HttpClient,
  ) { }

  async getCategories(): Promise<any[]> {
    const tokenRes = await Preferences.get({ key: 'TOKEN_KEY' });
    const headers = new HttpHeaders().set('Authorization', `Bearer ${tokenRes.value}`);
    
    // 将Observable转为Promise返回
    return this.httpClient.get<any[]>(`${environment.apiUrl}categories`, { headers }).toPromise();
  }
}

2. 修改categories.page.ts

export class CategoriesPage {
  categories: any[] = [];

  constructor(private categoriesService: CategoriesService) {}

  async ngOnInit() {
    await this.loadCategories();
  }

  async loadCategories() {
    try {
      this.categories = await this.categoriesService.getCategories();
    } catch (error) {
      console.error('加载分类失败:', error);
    }
  }
}

3. HTML模板保持不变

原模板无需修改，因为此时categories已经是实际的数组。

额外建议 #

• 尽量避免使用any类型，定义分类的接口类型，比如interface Category { name: string; seo_url: string; ... }，提升代码可读性和类型安全性。
• 处理HTTP请求错误时，可以添加用户提示（比如Ionic的Toast组件），而不仅仅是打印控制台。

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