角度订阅可观察的问题

Question

我正在尝试创建一个从包含帖子数组的 json 文件中获取帖子的服务。 我已经有一个使用 HttpClient 返回 json 文件内容的服务。 目标是显示完整的帖子内容。

获取 json 文件的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class GetJsonFileService {

  constructor(private http: HttpClient) {}

  getJsonFile(jsonFile: string /* the file path is set by components */){
    return this.http.get(jsonFile,{observe: 'body', responseType: 'json'});
  }
}

通过 id 获取帖子的服务：

import { Injectable } from '@angular/core';
import { GetJsonFileService } from './get-json-file.service';

@Injectable({
  providedIn: 'root'
})
export class GetPostService {

  constructor(private getJsonFileservice: GetJsonFileService) {}

  getPost(id: number) :object{
    var post!: object;
    this.getJsonFileservice.getJsonFile('assets/posts.json').subscribe((data :any)=>{
      post = data["posts"][id];
    });
    return post;
  }

}

显示帖子的组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GetPostService } from '../services/get-post.service';

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

  _post!: object;
  id!: number;

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

  ngOnInit(){
    var id!: number;
    this.route.params.subscribe(params=>{
      id = params.id;
    });
    this._post = this.getPost.getPost(id);
  }
}

当我尝试在组件模板中显示以下内容时： {{_post.title}}

我收到此错误： Errors while compiling. Reload prevented.

在 vscode 中打字稿告诉我： Property 'title' does not exist on type 'object'

我尝试了@msanford 的解决方案。 在后视图中还有一件事要改变，但我真的不知道该怎么做： posts["posts"][id] 打字稿给我一个错误：

Element implicitly has an 'any' type because expression of type '"posts"' can't be used to index type 'Object'.
  Property 'posts' does not exist on type 'Object'

有什么想法吗？

Answer 1

您已将您的帖子声明为对象类型：_post!: object;，而且，属性“标题”不存在于类型“object”上。

您应该使用帖子实际包含的内容字段声明an interface or class。举个例子：

interface Post {
  id: number;
  title: string;
  body: string;
  author: string;
  // etc
}

并在你的类型声明中使用它：_post: Post;

也就是说，正如其他人指出的那样，您的服务和组件逻辑需要工作。

您通常不会在服务中使用 .subscribe()，而是在服务的使用者（即组件）中使用 .subscribe()。所以，而不是

// Service
getPost(id: number) :object{
    var post!: object;
    this.getJsonFileservice.getJsonFile('assets/posts.json').subscribe((data :any)=>{
      post = data["posts"][id];
    });
    return post;
  }

简单使用

// Service
getPost = (): Post  => this.getJsonFileservice.getJsonFile<Post[]>('assets/posts.json')

（编辑：我已经通过在调用中添加<Post[]> 以习惯方式将您的服务返回到上面，但是由于我还没有看到您的数据结构，它可能需要一些不同的东西。）

然后订阅你的组件

ngOnInit(){
    let id: number;

    this.route.params.subscribe(
        params => id = params.id,
        error => console.error,
        complete => {
          this.getPost.getPost().subscribe(
            posts => this._post = posts["posts"][id],
            error => console.error
          );
        }
    );    
  }

您也有一个竞争条件，您可以在路由器向您发送带有 id 的参数之前请求发布，这可能是您添加 non-null-assertion operatorid !: number 的原因，因为编译器告诉你它可能是空的。这是有原因的，不要覆盖它。

Answer 2

您有一个问题，您在分配之前退回帖子：

post = data["posts"][id];

最好的方法是返回一个 observable 并在您想要提供的值时订阅它。

请务必仔细阅读文档以了解 observables 的工作原理。

https://angular.io/guide/observables

Answer 3

由于 Angular 使用 Typescript，您必须将 _post 标记为 any 或使用您期望的字段为其创建一个 typescript 接口/类型。

哦，你也可以这样做：

export class PostViewComponent implements OnInit {

  _post!: {
      title: string
  };
  id!: number;

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

  ngOnInit(){
    var id!: number;
    this.route.params.subscribe(params=>{
      id = params.id;
    });
    this._post = this.getPost.getPost(id);
  }
}