Angular Binding bind empty data

Question

I am new to Angular and type script. I am facing a problem when I call the Get API to show the employees the *ngFor iterate correctly as the count of the returned array but the bonded data is not empty as shown!!

the output image

when I print the data on the console this is the JSON that gets

Array(8)
0: {employeeID: 1, employeeName: 'Taha BABI', employeeSalary: 400000, intendedDate: '2022-07-02T19:15:39.68'}
1: {employeeID: 2, employeeName: 'Aya', employeeSalary: 5000000, intendedDate: '2022-01-06T00:00:00'}
2: {employeeID: 4, employeeName: 'Rami', employeeSalary: 1000000, intendedDate: '2022-07-02T19:16:27.095'}
3: {employeeID: 5, employeeName: 'Rami', employeeSalary: 1000000, intendedDate: '2022-07-02T19:16:27.095'}
4: {employeeID: 6, employeeName: 'Rami', employeeSalary: 1000000, intendedDate: '2022-07-02T19:16:27.095'}
5: {employeeID: 7, employeeName: 'Rami', employeeSalary: 1000000, intendedDate: '2022-07-02T19:16:27.095'}
6: {employeeID: 8, employeeName: 'Ahmad BABI', employeeSalary: 1000000, intendedDate: '2022-07-04T00:00:00'}
7: {employeeID: 9, employeeName: 'Adnan', employeeSalary: 500000, intendedDate: '2022-01-01T00:00:00'}
length: 8
[[Prototype]]: Array(0)

this is the Employee Module

export class Employee
{
  public EmployeeID: number;
  public EmployeeName: string;
  public EmployeeSalary: number;
  public IntendedDate: Date;
}

this is the service class

import { Injectable } from "@angular/core"
import { Employee } from "./Employee.Module"
import { HttpClient } from "@angular/common/http"

@Injectable({
  providedIn: 'root'
})

export class EmployeeService
{
  constructor(private http:HttpClient) { }
  employeeFormData: Employee = new Employee();
  public employeesList: Employee[];
  readonly url = "https://localhost:7075/api/employee";
  PostEmployeeData()
  {
    return this.http.post(this.url, this.employeeFormData +"/insert")
  }

  RefreshEmployeesList()
  {
    this.http.get(this.url).toPromise().then(res => {
      this.employeesList = res as Employee[];
      console.log(this.employeesList);
    });

  }
}

this is the employee.component.ts

import { Component, OnInit } from "@angular/core"
import { EmployeeService } from "../Shared/EmployeeService";
@Component({
  selector: "Employee",
  templateUrl: "./Employee.Component.html",
  styleUrls: [

  ]
})
export class EmployeeComponent
{
  constructor(public service: EmployeeService) { }

  ngOnInit()
  {
    //console.log(this.service.employeesList);
    this.service.RefreshEmployeesList();
    console.log("init");

  }
}

this is the employee.component.html

<div class="text-center jumbotron p-3 ">
  <h1>Employees CRUD</h1>
</div>
<div class="row">
  <div class="col">
    <EmployeeForm>
      Please Wait Form....
    </EmployeeForm>
  </div>
  <div class="col">
    <table class="table">
      <thead class="thead-light">
        <tr>
          <th>Employee Number</th>
          <th>Employee Name</th>
          <th>Employee Salary</th>
          <th>Employee Intended Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of service.employeesList;">
          <td>{{employee.EmployeeID}}</td>
          <td>{{employee.EmployeeName}}</td>
          <td>{{employee.EmployeeSalary}}</td>
          <td>{{employee.IntendedDate}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

In a nutshell it's about async data. You need to <tr *ngFor="let employee of employeesList$ | async"> where employeesList$ is an observable property of the component that feeds off the service. — Benny Halperin
– Benny Halperin, Commented Jul 6, 2022 at 17:16

martin66 · Accepted Answer · 2022-07-06 17:28:06Z

1

Didn't go to deep into your code but I see a few problems...

on your EmployeeComponent template, instead of iterating from the service itself, you should create a property and fill it upon initialization.

    export class EmployeeComponent {
    
        private subscription;

        public employeeList = [];

        constructor(public service: EmployeeService) { }

        ngOnInit(){
            this.subscription = this.service.RefreshEmployeesList()
                                  .subscribe(list => {
                                     this.employeeList = list;
                                   });
        }

        ngOnDestroy(){
           this.subscription.unsubscribe();
        }
    }

Then in you service instead of having the list there, you can just return it.

Also instead of converting to a promise, which in my opinion is really not required, you can just subscribe to the observable on the component itself and handle your logic there.

/// EmployeeService


  RefreshEmployeesList()
  {
    return this.http.get(this.url);
  }

then in the template you can just reference the list from the component itself...


       <tr *ngFor="let employee of employeesList;">
          <td>{{employee.EmployeeID}}</td>
          <td>{{employee.EmployeeName}}</td>
          <td>{{employee.EmployeeSalary}}</td>
          <td>{{employee.IntendedDate}}</td>
          <td></td>
        </tr>

answered Jul 6, 2022 at 17:28

martin66

3873 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Taha Babi Over a year ago

thanks for your answer but unfortunately nothing changed!

martin66 Over a year ago

what do you get when you do a console.log on the 'list' when you subscribe?

Taha Babi Over a year ago

i get the same JSON data, mentioned above!

martin66 Over a year ago

In you template I noticed you have a 'EmployeeForm' component. Can you comment it out and then try again. Maybe that component is throwing and error which would crash Angular.

Taha Babi Over a year ago

if you don't mind, can you take a look? the code Is on github! and it is just a demo

|

Benny Halperin · Accepted Answer · 2022-07-06 17:34:37Z

0

Something like this:

Service:

Dont' use .toPromise()

RefreshEmployeesList(): Observable<Employee[]> {
    return this.http.get(this.url);
}

Component:

export class EmployeeComponent {
  employees$: Observable<Employee[]>;

  constructor(private service: EmployeeService) { }

  ngOnInit(): void {
    this.employees$ = this.service.RefreshEmployeesList();
  }
}

HTML:

| async automatically unsubscribes

...
<tr *ngFor="let employee of employees$ | async">
...

edited Jul 6, 2022 at 17:34

answered Jul 6, 2022 at 17:27

Benny Halperin

2,3723 gold badges16 silver badges22 bronze badges

1 Comment

Benny Halperin Over a year ago

what's the error?

Taha Babi · Accepted Answer · 2023-04-27 10:59:39Z

0

Solved after checking the names (they are case-sensitive).

answered Apr 27, 2023 at 10:59

Taha Babi

255 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular Binding bind empty data

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related