如何在汽车经销商模拟应用中从LocalStorage展示车辆数据

要实现优先读取LocalStorage数据，无数据时从JSON文件拉取并缓存的需求，需要修正服务层的LocalStorage操作逻辑，再调整组件的初始化流程：

1. 修复car.service.ts中的核心问题 #

修正getItem方法的返回类型 #

原方法错误返回string类型，LocalStorage存储的是序列化后的数组，解析后应返回ICar[] | null：

public getItem(key: string): ICar[] | null {
  const data = localStorage.getItem(key);
  return data ? JSON.parse(data) : null;
}

完善getCarsLocal方法，使其返回Observable #

原方法无返回值且逻辑空转，需要改成返回Observable，让组件能通过订阅获取数据：

// 先导入rxjs的of操作符
import { of } from 'rxjs';

public getCarsLocal(): Observable<ICar[]> {
  const cars = this.getItem('cars');
  // 有数据则返回数据Observable，无数据返回空数组Observable
  return of(cars || []);
}

2. 调整car-list.component.ts的初始化逻辑 #

取消注释原订阅代码，确保LocalStorage有数据时，调用修复后的getCarsLocal更新组件数据：

ngOnInit(): void {
  if (this.carService.getItem('cars')) {
    console.log('%ccar-list.component.ts line:52 yes', 'color: #007acc;');

    this.sub = this.carService.getCarsLocal().subscribe({
      next: (cars) => {
        this.cars = cars;
        this.filteredCars = this.cars;
      },
      error: (err) => this.errorMessage = err,
    });
  } else {
    this.sub = this.carService.getCars().subscribe({
      next: (cars) => {
        this.cars = cars;
        this.filteredCars = this.cars;
        this.carService.setItem('cars', this.cars);
      },
      error: (err) => this.errorMessage = err,
    });
  }
}

可选优化：统一数据获取逻辑 #

在服务层封装一个方法，自动判断数据源，简化组件代码：

// 在car.service.ts中添加
getCarsWithLocalFallback(): Observable<ICar[]> {
  const localCars = this.getItem('cars');
  if (localCars) {
    return of(localCars);
  }
  // 获取远程数据后自动存入LocalStorage
  return this.cars$.pipe(
    tap(cars => this.setItem('cars', cars))
  );
}

组件ngOnInit可简化为：

ngOnInit(): void {
  this.sub = this.carService.getCarsWithLocalFallback().subscribe({
    next: (cars) => {
      this.cars = cars;
      this.filteredCars = this.cars;
    },
    error: (err) => this.errorMessage = err,
  });
}

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