http-сервис не работает в Angular - PullRequest
Новая
       13

http-сервис не работает в Angular

0 голосов
/ 11 мая 2018

Я использую 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 и получить данные на консоли.

Ответы [ 3 ]

0 голосов
/ 11 мая 2018

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 { }

Надеюсь, это поможет вам ..

0 голосов
/ 11 мая 2018

Импорт 

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

в app.module.ts 

imports: [HttpModule]

Остальная часть кода будет такой же, как вы отправили.

вызов http как 

this.http.get(`https://jsonplaceholder.typicode.com/posts`).subscribe(
    data => {
        console.log(data)
    });
0 голосов
/ 11 мая 2018

Вы просто вызываете http.get(url) и ожидаете, что что-то взамен похоже на вызов ajax-метода без успешных методов и методов обратного вызова с ошибкой.

Пожалуйста, проверьте Документация Http и использование методов get и post

Ошибка / неправильные предположения:

this.http.get(https://jsonplaceholder.typicode.com/posts) не вернет http-ответ, ожидающий

Реальность / Правильный подход:

Вы можете использовать метод pipe(can be used in the service) или subscribe(can be used in Component) в http-методе get, тип возвращаемого значения которого Observable.

В зависимости от ваших требований вы можете использовать любой из них 

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))
  }  

}
...