How can I get data from Web Api With Angular?

Question

I would like to get Mongo database with asp.net web api and take web api data with Angular. I created emprecord.service.ts,employee.component.html, employee.component.ts. But data doesn't appear on the employee page even though it showing on the web api. What may cause this problem? Can you give me an idea? Thank you in advance.

My emprecord.service.ts.

import { Injectable } from '@angular/core';  
import { Observable } from "rxjs";  
import {HttpHeaders, HttpClient } from "@angular/common/http";  
import { Employee } from "../app/employee"; 
 
@Injectable({  
  providedIn: 'root'  
})  
export class EmprecordService {  
   Url="http://localhost:53202/api";  
  constructor(private http:HttpClient) { }  
  
   GetEmployeeRecord():Observable<Employee[]>  
   {  
     debugger;  
    return this.http.get<Employee[]>(this.Url+"/GetDataEmp/GetAllEmployee")  
   }  
}

My employee.component.html.

<div class="container" style="margin-bottom:20px;padding-top:20px;">  
    <div class="row">  
      <div class="col-sm-12 btn btn-success">  
        Employee's Information
      </div>  
    </div>  
    <div class="col-sm-12" style="margin-bottom:20px;padding-top:20px;">  
      <div class="row">  
        <div class="col-sm-6">  
          <button type="button" class="btn btn-primary" data-toggle="modal" routerLink="/addemployee">  
            Add New Employee  
          </button>  
        </div>  
      </div>  
    </div>  
  </div>  
  <div class="container" style="padding-top:20px;">  
    <table class="table table-striped">  
      <thead class="thead-dark">  
        <th>Name</th>  
        <th>Department</th>  
        <th>Address</th>  
        <th>City</th>  
        <th>Country</th>  
        <th>Action</th>  
      </thead>  
      <tbody>  
        <tr *ngFor="let e of emp">  
        
          <td>{{e.name}}</td>  
          <td>{{e.department}}</td>  
          <td>{{e.address}}</td>  
          <td>{{e.city}}</td>  
          <td>{{e.country}}</td>  
          <td>  
            <div class="btn-group">  
              <button type="button" class="btn btn-primary mr-1" (click)="EmployeeEdit(e.Id)">Edit</button>  
              <button type="button" class="btn btn-danger mr-1" (click)="Deleteemployee(e.Id)">Delete</button>  
            </div>  
          </td>  
        </tr>  
      </tbody>  
    </table> 
  </div>

My employee.component.ts.

import { Component, OnInit } from '@angular/core';  
import { Employee } from "../employee";  
import { EmprecordService } from "../emprecord.service";  
import { Observable } from "rxjs";  
import { Router } from '@angular/router';  
@Component({  
  selector: 'app-employee',  
  templateUrl: './employee.component.html',  
  styleUrls: ['./employee.component.css']  
})  
export class EmployeeComponent implements OnInit {  
  private emp: Observable<Employee[]>;  
  massage:String;  
  dataSaved=false;  
  constructor(private router: Router,private emprecordService:EmprecordService) { }  
   Loademployee()  
   {  
    debugger;  
    this.emp = this.emprecordService.GetEmployeeRecord(); 
    console.log(this.emp);       
    debugger;       
   }  
  }  
  ngOnInit() {  
    localStorage.clear();
    this.Loademployee();      
  }   
}

score 0 · Answer 1 · answered Aug 08 '19 at 09:29

0

You need to subscribe.

this.emprecordService.GetEmployeeRecord()
    .subscribe(e => this.emp = e);

answered Aug 08 '19 at 09:29

baao

71,625
17
143
203

score 0 · Accepted Answer · answered Aug 08 '19 at 09:29

You subscribe to the observable to initialize the request and consume the results. So instead of

    this.emp = this.emprecordService.GetEmployeeRecord();

you should

    this.emprecordService.GetEmployeeRecord().subscribe(result => this.emp = result);

score 0 · Answer 3 · answered Aug 08 '19 at 09:30

0

this.http.get returns an observable. You need to subscribe to this observable in order to get the data. I suggest you read the documentation.

Try this

this.emprecordService.GetEmployeeRecord().subscribe(data => {
  this.emp = data;
});

answered Aug 08 '19 at 09:30

nash11

8,220
3
19
55

score 0 · Answer 4 · answered Aug 08 '19 at 09:32

import { Component, OnInit } from '@angular/core';  
import { Employee } from "../employee";  
import { EmprecordService } from "../emprecord.service";  
import { Observable } from "rxjs";  
import { Router } from '@angular/router';  
@Component({  
  selector: 'app-employee',  
  templateUrl: './employee.component.html',  
  styleUrls: ['./employee.component.css']  
})  
export class EmployeeComponent implements OnInit {  
  private emp: Observable<Employee[]>;  
  massage:String;  
  dataSaved=false;  
  constructor(private router: Router,private emprecordService:EmprecordService) { }  
   Loademployee()  
   {  
    debugger;  
    this.emp = this.emprecordService.GetEmployeeRecord().subscribe(result => this.emp = result); 
    console.log(this.emp);       
    debugger;       
   }  
  }  
  ngOnInit() {  
    localStorage.clear();
    this.Loademployee();      
  }   
}

How can I get data from Web Api With Angular?

4 Answers4