1

I don't know what is the problem with my code

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { Employee } from '../Employee';

@Injectable()
export class EmployeeService {

  employees: AngularFireList<any[]>;
  Employee: AngularFireObject<any>;

  constructor( 
    public af: AngularFireDatabase
  ) { 
    this.employees = this.af.list('/employees/employees') as AngularFireList <Employee[]>;
  }
getEmployees(): AngularFireList <any[]> {
  return this.employees ; 
}
}

and this is my component

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../services/employee.service';
import { Employee } from '../../Employee';
import { all } from 'q';
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {

  employees : Employee [];
  constructor(public employeeService : EmployeeService ) {

   }

  ngOnInit() {
    this.employeeService.getEmployees().valueChanges().subscribe( employees => {
      this.employees = employees[0];
      console.log(this.employees);
    })
  }

}
This is the html file 
<table class="table table-dark">
  <thead>
    <tr>
      
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email </th>
      <th scope="col">Country</th>
      <th scope="col">City</th>
      <th scope="col">Phone</th>
      <th scope="col">ID</th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let item of employees">
      <th >{{item.firstName}}</th>
      <th >{{item.lasttName}}</th>


    </tr>
  </tbody>
</table>
Jota.Toledo
  • 27,293
  • 11
  • 59
  • 73
Mohamed Ali Lassoued
  • 301
  • 4
  • 22
  • In your template, you are using `*ngIf` to try and loop through a collection, but the collection is actually just an object. You are setting `this.employees = employees[0];`, which would equate to setting `this.employees` the first object in an array. Perhaps this should really be `this.employees = employees;`. – R. Richards Feb 21 '18 at 01:03
  • Its Work thanks but there is another probleme with this "Can not assign type' any [] [] 'to type' Employee []" – Mohamed Ali Lassoued Feb 21 '18 at 01:13
  • See if changing `employees: AngularFireList;` to this `employees: AngularFireList;` in your service fixes that error. – R. Richards Feb 21 '18 at 01:16

1 Answers1

0

You are setting this.employees = employees[0]; and trying to loop through employees. But i suppose employees[0] is not an array or a iterable type. If your intention is to make employees contain only the first element. try this

ngOnInit() {
 this.employeeService.getEmployees().valueChanges().subscribe( employees => {
   this.employees = [employees[0]];
   console.log(this.employees);
 })
}
SaiKD
  • 72
  • 1
  • 8