Работа с данными из наблюдаемого в компоненте в Angular 6 - PullRequest
Новая
       12

Работа с данными из наблюдаемого в компоненте в Angular 6

0 голосов
/ 23 мая 2018

Я не уверен, правильно ли я сформулировал этот вопрос, поэтому я прошу прощения за неуклюжую формулировку.Я относительно новичок в angular, но мне довольно удобно делать HTTP-запросы и работать с данными в других средах (например, VueJS).Я начинаю понимать 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.Если я сделаю {{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 для этого приложения, я хочу просто выяснить, как отобразить данные, которые я до сих пор не могу сделать, иэто сводит меня с ума.Заранее благодарю за помощь.

1 Ответ

0 голосов
/ 23 мая 2018

Ваш возвращаемый JSON - это объект, который имеет field сообщений , в которых хранятся необходимые вам данные массива , поэтому просто возьмите поле posts из ответа вашего сервера и отобразите такой массив сообщений.Примерно так: 

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

Для лучшей типизации вы всегда можете указать тип переменной, т.е. public posts: Post[], тогда у вас будет проверка типа во время кодирования.

...