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]

其余代码将与您发布的相同。

像调用http一样

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 documentation and usage of get and post methods

错误/错误假设：

this.http.get(https://jsonplaceholder.typicode.com/posts) 不会返回预期的 http 响应

现实/正确方法：

您可以在返回类型为 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))
  }  

}