Angular组件调用API获数据后DOM不更新，需重新进入才显示

首次进入组件时数据不显示，核心是异步请求的时序问题：HTTP请求是异步执行的，你调用service.getElectronics()后立刻赋值this.Products = this.service.eleProducts，此时请求还没返回，eleProducts还是空数组。而切换组件再返回时，服务里已经缓存了请求完成后的eleProducts，所以能正常展示。另外，服务里的普通属性更新不会主动触发组件的变更检测，导致组件视图无法自动刷新。

方案1：用BehaviorSubject实现响应式数据传递（推荐） #

修改服务，将普通属性替换为BehaviorSubject，让组件能订阅数据变化：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ProductsService {
  // 用BehaviorSubject存储产品数据，初始值为空数组
  private eleProductsSubject = new BehaviorSubject<any[]>([]);
  eleProducts$ = this.eleProductsSubject.asObservable();

  // 用BehaviorSubject存储加载状态，初始值为true
  private spinnerElecSubject = new BehaviorSubject<boolean>(true);
  spinnerElec$ = this.spinnerElecSubject.asObservable();

  constructor(private http: HttpClient) {}

  getElectronics() {
    this.spinnerElecSubject.next(true);
    this.http
      .get(environment.baseUrl + '/category/electronics')
      .subscribe((res: any) => {
        this.eleProductsSubject.next(res);
        this.spinnerElecSubject.next(false);
      });
  }
}

修改组件，订阅服务的Observable来自动更新数据和状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductsService } from '../products.service';
import { Subscription } from 'rxjs';

export class ElectronicsComponent implements OnInit, OnDestroy {
  Products: any[] = [];
  spinner: boolean = true;
  // 统一管理订阅，防止内存泄漏
  private subscriptions = new Subscription();

  constructor(private service: ProductsService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    // 订阅加载状态变化
    const spinnerSub = this.service.spinnerElec$.subscribe(status => {
      this.spinner = status;
    });
    // 订阅产品数据变化
    const productsSub = this.service.eleProducts$.subscribe(products => {
      this.Products = products;
    });

    this.subscriptions.add(spinnerSub);
    this.subscriptions.add(productsSub);

    // 发起请求
    this.service.getElectronics();
  }

  // 组件销毁时取消所有订阅
  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  addToCart(event: any) {
    // 你的购物车逻辑
  }
}

模板无需修改，保持原逻辑即可。

方案2：用async管道简化代码（更简洁） #

如果不想手动管理订阅，可以直接在模板中使用Angular的async管道，自动处理订阅和销毁：

组件代码简化：

import { Component, OnInit } from '@angular/core';
import { ProductsService } from '../products.service';

export class ElectronicsComponent implements OnInit {
  // 直接暴露服务的Observable
  products$ = this.service.eleProducts$;
  spinner$ = this.service.spinnerElec$;

  constructor(private service: ProductsService) {}

  ngOnInit(): void {
    this.service.getElectronics();
  }

  addToCart(event: any) {
    // 你的购物车逻辑
  }
}

模板修改为：

<div class="row gap-3 justify-content-center" *ngIf="!(spinner$ | async)">
    <div
      class="card col-lg-4 col-md-6 col-sm-12 bg-warning"
      style="width: 18rem"
      *ngFor="let product of products$ | async"
    >
      <app-product
        [elecCart]="service.elecCart"
        [Product]="product"
        (target)="addToCart($event)"
      ></app-product>
    </div>
  </div>
  <div
    class="spin d-flex justify-content-center align-items-center w-100"
    *ngIf="spinner$ | async"
  >
    <app-spinner></app-spinner>
  </div>

• BehaviorSubject会保存当前最新值，新订阅者能立即拿到数据，同时数据更新时会通知所有订阅者，触发组件的变更检测，让视图自动刷新。
• 不管是手动订阅还是用async管道，都能确保组件在请求完成后及时获取到最新数据，解决了异步时序导致的首次加载空数据问题。

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