Angular订阅Observable获取JSON文章出现TS类型错误如何解决

报错原因与解决方案 #

你遇到的两个报错和一个隐藏的异步逻辑问题可以按以下步骤一次性解决： #

步骤1：定义明确的TS类型约束 #

所有报错的根源都是没有给TypeScript明确声明数据结构，先定义对应接口：

// 可单独存放在 shared/types/post.ts 或直接写在服务文件顶部
export interface Post {
  id: number;
  title: string;
  content: string;
  // 补充你文章JSON里的其他字段即可
}

// 对应posts.json的整体结构
interface PostsJsonResponse {
  posts: Post[];
}

步骤2：修改JSON读取服务，增加泛型支持 #

给HttpClient的get方法指定返回类型，解决索引posts字段的报错：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PostsJsonResponse } from '你的类型文件路径';

@Injectable({
  providedIn: 'root'
})
export class GetJsonFileService {
  constructor(private http: HttpClient) {}

  getJsonFile<T>(jsonFile: string){
    return this.http.get<T>(jsonFile,{observe: 'body', responseType: 'json'});
  }
}

步骤3：修改文章获取服务，修复异步逻辑 #

你之前的写法是同步返回post变量，但HTTP请求是异步的，返回时请求还没完成，变量是空值。改为返回Observable让调用方订阅：

import { Injectable } from '@angular/core';
import { GetJsonFileService } from './get-json-file.service';
import { map, Observable } from 'rxjs';
import { Post, PostsJsonResponse } from '你的类型文件路径';

@Injectable({
  providedIn: 'root'
})
export class GetPostService {
  constructor(private getJsonFileservice: GetJsonFileService) {}

  getPost(id: number) : Observable<Post | undefined>{
    return this.getJsonFileservice.getJsonFile<PostsJsonResponse>('assets/posts.json').pipe(
      map(data => data.posts[id])
    );
  }
}

步骤4：修改组件逻辑，匹配异步调用 #

同时修正路由参数读取的时序问题，必须在路由参数的订阅回调内获取文章：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GetPostService } from '../services/get-post.service';
import { Post } from '你的类型文件路径';

@Component({
  selector: 'app-post-view',
  templateUrl: './post-view.component.html',
  styleUrls: ['./post-view.component.scss']
})
export class PostViewComponent implements OnInit {
  _post?: Post;

  constructor(private route: ActivatedRoute, private getPostService: GetPostService){}

  ngOnInit(){
    this.route.params.subscribe(params=>{
      const id = Number(params.id);
      this.getPostService.getPost(id).subscribe(post => {
        this._post = post;
      })
    });
  }
}

步骤5：修改模板，处理空值兼容 #

把模板里的变量调用改为可选链写法，避免加载过程中的空值报错：

{{_post?.title}}

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