Angular：无法使用 HttpClientModule 从 url 获取数据

Question

在我的应用程序中，我的 objective 是从下面的这个 URL 中获取数据并将其显示在我的应用程序中。 https://jsonplaceholder.typicode.com/posts/1

我的问题是数据没有显示在我的应用程序中，控制台说了一些我不明白在哪里更正的内容。

firefox 控制台 (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>

这应该是一项简单的工作，但是 vs code 没有给我任何错误，我不明白我的浏览器控制台是什么意思。请指出哪里出了问题。

Answer 1

您需要订阅您的可观察对象：

  posts: any[] = [];

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

或者您可以结合使用 observable 和 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>

Angular：无法使用 HttpClientModule 从 url 获取数据

Angular : can't get data from url using HttpClientModule

angular

typescript

httpmodule