I am trying to fetch details from API with Http Calls in angular/ionic app, the api is not getting called and not the details not getting fetched, i am trying to fetch the details with simple angular expression (binding).
api.service.ts
import { Injectable } from '@angular/core';
//import { Observable, of, throwError } from 'rxjs';
import { HttpClient } from '@angular/common/http';
//import { catchError, tap, map } from "rxjs/operators";
/**const httpOptions = {
headers: new HttpHeaders({'Content-type': 'application/jason'})
};**/
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getUsers()
{
return this.http.get("http://localhost:3000/api/con_users");
}
}
app.module.ts
import { HttpClientModule } from "@angular/common/http";
@NgModule({
declarations: [AppComponent],
entryComponents: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
profile.page.service
import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/api.service';
@Component({
selector: 'app-profile',
templateUrl: './profile.page.html',
styleUrls: ['./profile.page.scss'],
})
export class ProfilePage {
userDetails: any=[];
constructor(public apiService:ApiService) {}
getUserDetails()
{
this.apiService.getUsers().subscribe((data)=>{
var anyData = <any>data;
this.userDetails = anyData.data;
})
}
}
profile.page.html
<ion-content>
<ion-list>
<ion-item *ngFor="let user of userDetails">
{{user.email}}
</ion-item>
</ion-list>
</ion-content>