HTTP服務命中在Angular中不起作用

Question

我正在使用JSONPlaceholder來獲取服務中的數據，但是我根本無法獲取數據。 請幫幫我。

user.component.html

<p (click)="getUsers()">Click Me!</p>
<ul *ngFor="let x of users">
  <li>{{x.name}}, {{x.age}}</li>
</ul>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService } from '../../services/data.service';
import { Http } from '@angular/http';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private http:Http) { }

  ngOnInit() {
  }

  getUsers(){
    console.log(this.http.get("https://jsonplaceholder.typicode.com/posts"));
  }  

}

app.module.ts

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

//Additional files inclusion
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import { DataService } from './services/data.service';
import { Http } from '@angular/http';

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

請有人可以幫助我通過http進行成功的服務呼叫並在控制台上獲取數據。

Answer 1

進口

import { HttpModule } from '@angular/http';

在app.module.ts中

imports: [HttpModule]

其余代碼將與您發布的相同。

像打電話一樣

this.http.get(`https://jsonplaceholder.typicode.com/posts`).subscribe(
    data => {
        console.log(data)
    });

Answer 2

user.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService } from '../../services/data.service';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  this.http.get(`https://jsonplaceholder.typicode.com/posts`).subscribe(
        data => {
            console.log(data)
        }); 

}

app.module.ts

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

//Additional files inclusion
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import { DataService } from './services/data.service';
import { Http } from '@angular/http';
import { HttpModule } from "@angular/http";

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [ Http ],
  bootstrap: [AppComponent]
})
export class AppModule { }

希望這對您有幫助。

Answer 3

您只是在調用http.get(url)並期望得到回報，就像調用沒有成功和錯誤回調方法的ajax方法一樣。

請檢查Http文檔以及get和post方法的用法

錯誤/錯誤的假設：

this.http.get(https://jsonplaceholder.typicode.com/posts)將不會返回期望的http響應

現實/正確的方法：

您可以pipe(can be used in the service)返回類型為Observable的http的get方法上使用pipe(can be used in the service)或subscribe(can be used in Component)方法。

根據您的要求，您可以使用其中任何一個

http.get('https://jsonplaceholder.typicode.com/posts')
      // Call map on the response observable to get the parsed people object
      .pipe(map(res => res.json()))
      // Subscribe to the observable to get the parsed people object and attach it to the
      // component
      .subscribe(posts => this.posts = posts)

因此，您的組件代碼變為：

user.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService } from '../../services/data.service';
import { Http } from '@angular/http';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private http:Http) { }

  ngOnInit() {
  }

  getUsers(){
    this.http.get("https://jsonplaceholder.typicode.com/posts")
     .subscribe(posts=> console.log(posts))
  }  

}