Angular模板无法显示Django接口返回数据的问题排查与解决

• 核心错误：你在ApiService的getApi方法中直接调用了.subscribe()，该方法返回值是Subscription订阅对象，并非接口返回的业务数据。组件中this.todo被赋值为这个订阅对象，自然读不到响应结构里的id字段，模板也无法展示对应内容。
• 逻辑问题：服务层的subscribe回调仅打印了日志，没有将接口返回数据向外传递；同时HttpClient.get是异步请求，写在subscribe后的代码会在请求响应前就执行，本身就拿不到请求结果。
• 设计问题：Angular中HttpClient返回的是冷Observable，常规实践是服务层只负责返回请求Observable，由调用方（组件）负责订阅、处理响应数据，避免数据流混乱。

1. 修正服务层ApiService代码 #

移除服务层的.subscribe()调用，直接返回http请求生成的Observable：

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}
  private URL = "http://127.0.0.1:8000/api/product/";

  getApi(arg: any) {
    console.log('入参：', arg);
    return this.http.get(this.URL);
  }
}

2. 修正组件层AppComponent代码 #

在组件的ngOnInit生命周期中订阅服务返回的Observable，拿到响应数据后再赋值给模板绑定的todo变量：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angpr';
  todo: any;

  constructor(public api: ApiService) {}

  ngOnInit(): void {
    this.api.getApi('hey').subscribe(data => {
      console.log('接口返回：', data);
      this.todo = data;
    });
  }
}

3. 模板优化（避免异步空值报错） #

接口请求是异步行为，页面初始加载阶段todo的值为undefined，直接读取id属性在Angular严格模式下会触发空值错误，可以选择以下任意一种方式优化：

<!-- 方式1：使用安全导航操作符?.，todo为空时自动中断属性读取 -->
<p>
  {{todo?.id}}
</p>

<!-- 方式2：使用*ngIf做存在性判断，todo赋值完成后再渲染节点 -->
<p *ngIf="todo">
  {{todo.id}}
</p>

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