Angular 6 - NgFor only supports binding to Iterables such as Arrays [closed]

Question

Angular 6 - NgFor only supports binding to Iterables such as Arrays [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Error: Can not find a supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I have model:

import { Classroom } from "./classroom.model";

export class Student {
    public id : string;
    public name: string;
    public classroom: Classroom[];
    public mother: string;  
    public phone_mother: string; 
    public father: string;    
    public phone_father: string;
    public address: string;

    constructor(id : string, name: string, classroom: Classroom[], mother: string, phone_mother: string, father: string,  phone_father: string, address: string, ){
        this.id = id,
        this.name = name;
        this.mother = mother;
        this.father = father;
        this.phone_mother = phone_mother;
        this.phone_father = phone_father;
        this.address = address;
        this.classroom = classroom;
    }
}

My Service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { Student } from "../models/student.model";
import { Classroom } from "../models/classroom.model";

@Injectable()
export class StudentsServices
 {   
    private _url = 'https://localhost:3000/api/aluno'
       
    constructor(private http: Http){}

getStudents(){
    return this.http
                .get(this._url)
                .pipe(map((response : Response) => {
                    return <Student[]>response.json();
                }));                         
}


    getEstudantes(): Observable<Student[]> {
        return this.http.get(this._url)
                        .pipe(map(res=>res.json()));                        
     } 

}

My Component:

import { Component, OnInit } from '@angular/core';

import { StudentsServices } from '../services/students.services';
import { Student } from '../models/student.model';

@Component({
  selector: 'app-students',
  templateUrl: './students.component.html',
  styleUrls: ['./students.component.css'],
  providers: [StudentsServices]
})
export class StudentsComponent implements OnInit {  
  _students: Student[] = [];  

  constructor(private services: StudentsServices) { }

  getStudents(): void {
        this.services.getStudents()
                     .subscribe(
                        data => this._students = data,
                        error => console.log("Student Service Error: " + error)
                     )
  }  

  getEstudantes() {
    this.services.getUsers()
                    .subscribe(
                      data => this._students = data,
                      error =>  console.log("Student Service Error: " + error));
  }

  ngOnInit() {    
        this.getStudents();

        //this.getEstudantes();

        console.log(this._students);
  }
}

and this is my HTML

<div class="row">
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th class="text-center">ID</th>
                <th class="text-center">Nome</th>
                <th class="text-center">Mãe</th>
                <th class="text-center">Pai</th>
                <th class="text-center">Telefone da mãe</th>
                <th class="text-center">Telefone do Pai</th>
                <th class="text-center">Endereço</th>
                <th class="text-center">Turma</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let student of _students">
                <td class="text-center">{{student.id}}</td>
                <td class="text-center">{{student.name}}</td>
                <td class="text-center">{{student.mother}}</td>
                <td class="text-center">{{student.father}}</td>
                <td class="text-center">{{student.phone_father}}</td>
                <td class="text-center">{{student.phone_mother}}</td>
                <td class="text-center">{{student.address}}</td>
                
            </tr>
        </tbody>
    </table>
</div>

these are the date

typescript angular

asked by anonymous 31.05.2018 / 23:50

3 answers

0

Try to initialize the variable students when you declare it:

_students:Student[]= []

this.services.getStudents()
.pipe(map(student=>student.alunos))
.subscribe(alunos=>this._students=alunos)

01.06.2018 / 10:23

0

Your problem is in process asynchronicity, your .html code is running before you can even feed the variable into your .ts. For this problem you need to work with Promises or Promise. an example

In-service method:

public getProjetos(): Promise<Projeto[]>{
return this.http.get('${this.url_api}projetos/')
.toPromise()
.then((resposta: any) => {
    console.log("Teste: " + resposta)
    return resposta.json()
})

service call:

this.projetoService.getProjetos().then((projetos: Projeto[]) => {
  this.projetos = projetos

})

01.06.2018 / 13:02

Check if a username already exists in angular database 2 + php How to find and display the position of an item in the list, not setting the string value for the search? [duplicate]

score 0 · Accepted Answer

My problem was in mapping the data that came from the api to the variables that were in my model. At api the data was coming in Portuguese and my model was in English.

So I was able to specify what data I wanted in my "data.alunos" service call:

getStudents(): void {
        this.services.getStudents()
                     .subscribe(
                        data => this._students = data.alunos,
                        error => console.log("Student Service Error: " + error),
                        () => console.log('Done.')
                     )
  }

I had to adjust the service too:

  getStudents(){
        return this.http
                    .get(this._url)
                    .pipe(map((response => response.json())));                         
    }