Как прочитать JSON ответ от REST API, используя Angular - PullRequest
Новая
       98

Как прочитать JSON ответ от REST API, используя Angular

0 голосов
/ 22 марта 2020

Я изучаю Angular основы. Я выбрал очень маленький проект. Я использую JSONPlaceholder, поддельный REST API. Я хочу прочитать все сообщения и отобразить их на странице, используя простые ngFor l oop. Я создал сервис для этого. Я покажу свой код один за другим. Но вот stackblitz для того же самого. Мне нужна помощь только с этими файлами:

  1. post-list
  2. post interface
  3. post.service

Я написал Это много кода с нуля после прочтения статей и просмотра учебников по множественному освещению и YouTube, но теперь я заблокирован. Вот мой код:

post.ts 

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

post.service.ts 

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

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

  constructor() {}

  getAllPosts():Observable<Post[]> {
    return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => console.log(json))
  }
}

post-list.component.ts 

import { PostService } from './post.service';
import { Component } from '@angular/core';

import { Post } from './post'

@Component({
  templateUrl: './post-list.component.html',
})
export class PostList {

  posts: Post[] = [];
  errorMessage="";

  constructor(private postservice: PostService) {
    this.postservice.getAllPosts().subscribe({
      next: posts => {
        this.posts=posts;
      },
      error: err => this.errorMessage = err
    });
  }
}

Я настаиваю, пожалуйста, посмотрите на stackblitz , это сэкономит время и усилия каждого. Мои проблемы:

Невозможно связать с 'ngForOf', так как это не известное свойство 'div'. ("

Ошибка: 0.9.1 / dist / zone.j

Пожалуйста, укажите мои ошибки и исправьте меня.

1 Ответ

1 голос
/ 22 марта 2020

Сначала вы должны изменить свой сервис и использовать HttpClient внутри HttpClientModule. 

export class PostService {

  constructor(private httpClient: HttpClient) {};

  getAllPosts(): Observable<Post[]> {
    return this.httpClient.get<Post[]>('https://jsonplaceholder.typicode.com/posts');
  }
}

Также важно правильно импортировать HttpClientModule, а CommonModule - если вы используете дочерние модули. Общие директивы, такие как async, не будут доступны, если вы не импортируете их. 

@NgModule({
  imports:[
    CommonModule,
    HttpClientModule,
   ...

Тогда у вас есть несколько вариантов получения и отображения вашего результата, вот 2 основных варианта:

Опция 1 

@Component({
  templateUrl: './post-list.component.html',
})
export class PostList {
  posts: Post[] = [];
  errorMessage: string;

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.posts = this.postService.getAllPosts().subscribe(
      posts => {
        this.posts = posts
      },
      error => {
        this.errorMessage = error;
      }
    );
  }
}

Опция 2 (рекомендуется) 

@Component({
  templateUrl: './post-list.component.html',
})
export class PostList {
  posts$: Observable<Post[]>;
  errorMessage: string;

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.posts$ = this.postService.getAllPosts().pipe(
      catchError(error => {
        this.errorMessage = error;
      });
    );
  }
}

шаблон. html: 

<div *ngFor="let post of posts$ | async">
  <p>{{ post.userId }}</p>
  ...
</div>

См. обновленная демонстрация stackblitz для этого рекомендуемого варианта с трубами Observable и async.

...