[英]this.http.get is not a function angular8
I want to display list of users using service use angular 8 我想显示使用服务使用角度8的用户列表
data-service.service 数据service.service
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs' ;
import { HttpClientModule } from '@angular/common/http';
import 'rxjs/add/operator/map';
@Injectable({
providedIn: 'root'})
export class DataServiceService {
constructor(public http:HttpClientModule) {}
getPersone(){
return this.http.get('https://jsonplaceholder.typicode.com/users').map(res=>res.json);
}
}
app.module.ts app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/Forms';
import {DataServiceService} from './services/data-service.service' ;
//import { HttpModule } from '@angular/Http';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NajibComponent } from './components/najib/najib.component';
import { EventsComponent } from './components/events/events.component';
import { CeventsComponent } from './components/cevents/cevents.component';
import { FormsComponent } from './components/forms/forms.component';
import { SComponentComponent } from './components/s-component/s-component.component';
import { from } from 'rxjs';
import { Server } from 'net';
@NgModule({
declarations: [
AppComponent,
NajibComponent,
EventsComponent,
CeventsComponent,
FormsComponent,
SComponentComponent
],
imports: [
BrowserModule,
FormsModule,
// HttpModule
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
s-component.component.ts S-component.component.ts
import { Component, OnInit } from '@angular/core';
import { DataServiceService } from '../../services/data-service.service';
@Component({
selector: 'app-s-component',
templateUrl: './s-component.component.html',
styleUrls: ['./s-component.component.css']
})
export class SComponentComponent implements OnInit {
users:any[]=[];
constructor(public dataService:DataServiceService) {
this.dataService.getPersone().subscribe(users=>{
this.users=users;
});
}
ngOnInit() {
}
}
s-component.component.html S-component.component.html
<div class="container">
<p>s-component works!</p>
<ul >
<li *ngFor="let item of users">
{{ item.id }}
</li>
</ul>
</div>
You need to use constructor(private http: HttpClient)
您需要使用
constructor(private http: HttpClient)
In your DataServiceService
: 在您的
DataServiceService
:
import { HttpClient } from '@angular/common/http';
and inject same in constructor
. 并在
constructor
注入相同的内容。
You should be injecting HttpClient
to your service NOT the HttpClientModule
in your DataServiceService
. 您应该将
HttpClient
注入服务而不是 DataServiceService
的HttpClientModule
。
First you need to import import { HttpClientModule } from '@angular/common/http';
首先,您需要
import { HttpClientModule } from '@angular/common/http';
导入import { HttpClientModule } from '@angular/common/http';
in your main module you done that so now you need to in same module declare your service DataServiceService
but in providers array. 在主模块中,您已经这样做了,所以现在您需要在同一模块中,但在providers数组中声明您的服务
DataServiceService
。
Module: 模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DataService } from './shared/data.service';
import { HttpClientModule } from '@angular/common/http';
import { CComponentComponent } from './c-component/c-component.component';
@NgModule({
declarations: [
AppComponent,
CComponentComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [
DataService // < here is your own data service
],
bootstrap: [AppComponent]
})
export class AppModule { }
Service: 服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('https://jsonplaceholder.typicode.com/users')
}
}
component.ts: component.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../shared/data.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-c-component',
templateUrl: './c-component.component.html',
styleUrls: ['./c-component.component.scss']
})
export class CComponentComponent implements OnInit {
users: Observable<any>
constructor(private data: DataService) { }
ngOnInit() {
this.users = this.data.getUsers()
}
}
component.html : component.html:
<div class="container">
<p>c-component works!</p>
<ul>
<li *ngFor="let user of users | async">
{{ user.id }}
</li>
</ul>
</div>
In your service you no need to call res.json
If you really need response as a json. 在您的服务中,您无需调用
res.json
如果您确实需要将响应作为json。 you can call it in your template like {{ user | json }}
您可以像
{{ user | json }}
{{ user | json }}
and it will display objects as a json file. {{ user | json }}
,它将对象显示为json文件。 As a response from http call in your service you getting an Observable<any>
value. 作为服务中http调用的响应,您将获得
Observable<any>
值。 To ret rave data from that observable you need to subscribe to it or call pipe in your template like above users | async
要从该可观察的对象中撤出好评如潮的数据,您需要像上面的
users | async
一样订阅它或在模板中调用管道。 users | async
. users | async
This pipe will manage the subscription for you so you no need do that. 该管道将为您管理订阅,因此您无需这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.