在 Angular 6 的组件中处理来自 observable 的数据

Question

我不确定我是否正确地表达了这个问题，所以我为笨拙的措辞道歉。我对 Angular 比较陌生，但对发出 HTTP 请求和在其他框架（如 VueJS）中处理数据非常满意。我开始了解 angular 使用的 Observables。我正在尝试制作一个博客应用程序，并且有一个快速后端，其中包含用于博客帖子的 JSON。

在我的 post.service.ts 我有：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';

import { Post } from '../post';

@Injectable({
  providedIn: 'root'
})

export class PostService {

  private apiUrl = 'http://localhost:8081/posts';

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }

constructor( private http: HttpClient,
  private postService: PostService ) { }

}

然后我想列出我 post-list.component.ts 中的所有帖子：

import { Component, OnInit } from '@angular/core';
import { PostService } from '../../services/post.service'
import { Post } from '../../post';


@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})

export class PostListComponent implements OnInit {

  public posts = [];

  constructor(private postService: PostService) {  }

  ngOnInit() {
    this.postService.getPosts()
      .subscribe(data => this.posts = data);
  }
}

但是帖子数组变成了一个对象，我不确定如何将它用作数组。如果我尝试使用 *ngFor 方法，我会收到错误消息。如果我将{{posts}} 放在 html 中，页面会显示 [object Object]。如果我这样做{{posts | json}}，它会显示实际的JSON，但我仍然无法遍历它。

这是 json 的样子：

{
    "posts": [
    {
        "_id": "5b04b269fde3ca29b35ffc3e",
        "name": "Mike",
        "title": "Stuff",
        "post": "This is a post about stuff"
    },
    {
        "_id": "5b04b24dfde3ca29b35ffc3d",
        "name": "OtherUser",
        "title": "New Post Test",
        "post": "This is a test post"
    },
    {
        "_id": "5b02ed783aa641758c08e601",
        "name": "Emerjawn",
        "title": "Post"
    }
    ]
}

在我尝试为此应用程序设置 CRUD 之前，我想简单地弄清楚如何显示我仍然无法做到的数据，这让我发疯了。提前感谢您的帮助。

Answer 1

您的返回 JSON 是一个对象，其中有 field posts 保存您需要的 数组数据 所以只需从您的服务器响应中获取 posts 字段并呈现这样的数组帖子。像这样：

ngOnInit() {
    this.postService.getPosts()
      .subscribe(data => this.posts = data.posts);
  }

为了更好地键入，您始终可以指定变量类型，即public posts: Post[]，然后您将在编码时进行类型检查。