title: Angular 5: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'
body: <p>I have tried looking for answers in here, but havent found any that can be applied to me so here goes.I am trying to get a list of employments from .net backend and everyting is working fine until i try to *NgFor in the view.<br>
  I have tried adding for example 'employees.EmploymentList' to the response, but then I get 'Property 'Employmentlist' does not exist on type 'IListItem[]' </p>
  
  <p>This i my app:</p>
  
  <p>my list component, and ill post the console log in the bottom of the post.</p>
  
  <pre><code>export class EmployeeListComponent {
  
  unitIdParam: string;
  orgNoParam: string;
  employeeList: EmployeeListItemComponent[];
  errorMessage: string;
  
  
  _ListFilter: string;
  get listFilter(): string {
      return this._ListFilter;
  }
  set listFilter(value: string) {
      this._ListFilter = value;
      this.filteredEmployees = this.listFilter ? this.performFilter(this.listFilter) : this.employees;
  }
  
  @Input()
  names: any[];
  
  filteredEmployees: IListItem[] = [];
  employees: IListItem[] = [];
  
  constructor(elm: ElementRef, private apiService: ApiService, private route: ActivatedRoute) {
      this.names = elm.nativeElement.getAttribute('names');
  
      this.route.params.subscribe(params =&gt; {
          this.orgNoParam = params['orgNoParam'];
          this.unitIdParam = params['unitIdParam'];
      });
  }
  
  ngOnInit(): void {
      this.apiService.getEmploymentList(this.orgNoParam, this.unitIdParam)
          .subscribe(employees =&gt; {
              this.employeeList = employees;
              this.filteredEmployees = this.employeeList;
              console.log(this.filteredEmployees);
          },
          error =&gt; this.errorMessage = &lt;any&gt;error);
  }
  
  performFilter(filterBy: string): IListItem[] {
      filterBy = filterBy.toLocaleLowerCase();
      return this.employees.filter((employee: IListItem) =&gt;
          employee.Name.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>my api service</p>
  
  <pre><code>@Injectable()
  export class ApiService {
  //Set url
  private employmentListUrl = 'api/employment/list';
  
  constructor(private http: HttpClient) { }
  
  getEmploymentList(orgNoParam: string, unitIdParam: string): Observable&lt;IListItem[]&gt; {
      //set headers
      let head = new HttpHeaders();
      head = head.append('Content-Type', 'application/json');
  
      //set params
      let params = new HttpParams();
      params = params.append('orgNoParam', orgNoParam);
      params = params.append('unitIdParam', unitIdParam);
  
      let data = {
          "orgNoParam": orgNoParam,
          "unitIdParam": unitIdParam
      };
      let body = JSON.stringify(data)
  
      //api call
      return this.http.post&lt;IListItem[]&gt;(this.employmentListUrl, body, { headers: head })
          .do(data =&gt; JSON.stringify(data))
          .catch(this.handleError);
  }
  
  private handleError(err: HttpErrorResponse) {
      console.log(err.message);
      return Observable.throw(err.message);
  }
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://i.stack.imgur.com/LZj4b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LZj4b.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="gridrow" *ngFor="let employee of filteredEmployees"&gt;
              &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
              &lt;td&gt;
                  {{employee.PersonKey._displayValue}}
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a rel="popover" href="/{{ employee.EmploymentReference.OrganizationRegistrationNumber.FullValue }}/employment/{{ employee.EmploymentReference.NationalCivicRegistrationNumber.FullValue }}/info" class="name-employment new-style " data-parent-org-name=""&gt;{{employee.Name}}&lt;/a&gt;
              &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/Z0vuh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z0vuh.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/I6N9l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I6N9l.png" alt="enter image description here"></a></p>