Angular: невозможно получить данные из URL с помощью HttpClientModule - PullRequest
Новая
       67

Angular: невозможно получить данные из URL с помощью HttpClientModule

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

В моем приложении моей целью является получение данных с этого URL-адреса ниже и отображение их в моем приложении. https://jsonplaceholder.typicode.com/posts/1

Моя проблема в том, что данные не отображаются в моем приложении, консоль говорит что-то, что я не понимаю, где исправить.

firefox console (ctrl + shift + k) 

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:40471

[WDS] Live Reloading enabled. client:52

ERROR Error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
    Angular 21
    RxJS 5
    Angular 9
core.js:5882:19

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  readonly ROOT_URL = 'https://jsonplaceholder.typicode.com';
  posts: any;
  constructor(private http: HttpClient) {

  }
  getPosts() {

     this.posts = this.http.get(this.ROOT_URL + '/posts/1');
  }
}

**app.component.html**

<h1>Angular HTTP Basic</h1>

<button (click)="getPosts()"> get</button>

<div *ngFor = "let post of posts">
  {{ post | json }}
</div>

Это должна быть простая работа, но код не выдал мне никакой ошибки, и я не понимаю, что означает консоль браузера. Пожалуйста, укажите, что пошло не так.

1 Ответ

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

Вам нужно подписаться на свою наблюдаемую: 

  posts: any[] = [];

  getPosts() {
     this.http.get(this.ROOT_URL + '/posts/1').subscribe((post) => {
       this.posts = [post];
     });
  }

Или вы можете использовать всю мощь наблюдаемых и angular вместе: 

  import { map } from 'rxjs/operators';
  import { Observable } from 'rxjs';

  posts: Observable<any[]>;

  getPosts() {
     this.posts = this.http.get(this.ROOT_URL + '/posts/1').pipe(
       map((post) => [post])
     );
  }

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