Angular中为何无法用HTTP请求数据设置服务私有allTodos属性？

问题核心原因 #

1. 异步请求时机错误：HttpClient.get是异步操作，原getTodos方法发起请求后立刻返回空的allTodos数组，此时请求还未完成，组件拿到的自然是空数据。
2. 类型不匹配：JSON文件返回的是Todo对象数组，但服务中http.get指定的类型是<Todo>，导致类型推断错误，后续赋值/推送操作逻辑混乱。

修复步骤 #

步骤1：修正服务的异步逻辑与类型定义

修改TodosService，让getTodos直接返回请求的Observable（异步操作推荐用Observable传递数据），同时修正类型匹配JSON返回结构：

import { Todo } from './todo.model';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class TodosService {
  constructor(private http: HttpClient) {}

  public getTodos(): Observable<Todo[]> {
    // 指定类型为Todo数组，匹配JSON返回结构
    return this.http.get<Todo[]>('./assets/todos.json');
  }
}

步骤2：修正组件的订阅逻辑

在组件中订阅服务的Observable，待异步请求完成后再更新todos数组：

import 'zone.js/dist/zone';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TodosService } from './todo.service';
import { Todo } from './todo.model';

@Component({
  selector: 'app-todo',
  standalone: true,
  imports: [CommonModule],
  providers: [TodosService],
  template: `
    <p>Hello from todo.component</p>
    <ul>
      <li *ngFor="let todo of todos">{{todo.description}}</li>
    </ul>
  `,
})
export class TodoList implements OnInit {
  todos: Todo[] = [];
  constructor(private todoService: TodosService) {}

  ngOnInit() {
    // 订阅异步请求，数据返回后更新组件内的todos
    this.todoService.getTodos().subscribe((todos) => {
      this.todos = todos;
      console.log('todo-list: ', this.todos);
    });
  }
}

可选：服务端数据缓存 #

如果需要避免重复请求JSON文件，可以在服务中添加缓存逻辑：

import { Todo } from './todo.model';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class TodosService {
  private allTodos: Todo[] | null = null;

  constructor(private http: HttpClient) {}

  public getTodos(): Observable<Todo[]> {
    // 已有缓存则直接返回
    if (this.allTodos) {
      return of(this.allTodos);
    }
    // 无缓存则发起请求并缓存数据
    return this.http.get<Todo[]>('./assets/todos.json').pipe(
      tap(todos => {
        this.allTodos = todos;
      })
    );
  }
}

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