时间戳

首页 > 解决方案 > 在 Angular 6 的组件中处理来自 observable 的数据

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

问题描述

我不确定我是否正确地表达了这个问题，所以我为笨拙的措辞道歉。我对 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 之前，我想简单地弄清楚如何显示我仍然无法做到的数据，这让我发疯了。预先感谢您的帮助。

标签： jsonangularhttpcrudangular2-observables

解决方案

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

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

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

推荐阅读