Angular 8 NgFor поддерживает только привязку к итерируемым объектам, таким как ошибка массивов и доступ к элементу управления Acces Control

Question

У меня есть модель:

export class Employe {    
    constructor(public id?: any,
        public nom?: String,
        public prenom?: String,
        public cin?: String){}    
}

employee.component.ts

ngOnInit(){
    this.loadEmployes();
}    

 pageEmployes:any={};

  loadEmployes():Observable<any>{    
     this.http.get("http://localhost:8080/api/employe").subscribe(
      data=>{
        console.log(data);
        this.pageEmployes = data;

      }, err=>{
        console.log(err);
      }
    );
    return this.pageEmployes;
  }

employee.component.html

 <tr *ngFor="let item of pageEmployes">         
      <td>{{item.nom}}</td>
      <td>{{item.prenom}}</td>    
    </tr>

CollaborateurController.java

@RestController

@RequestMapping("/api/employe")

@CrossOrigin("*")

public class CollaborateurController {

    @Autowired
    private CollaborateurRepository collaborateurRepository;

    @RequestMapping(value="", method=RequestMethod.GET)
    public List<Collaborateur> getEmp() {
        return (List<Collaborateur>) collaborateurRepository.findAll();
    }

Это приводит меня к ошибке:

Ошибка: Ошибка: не удается найти другой поддерживающий объект '[объект Объект] 'типа' объект '. NgFor поддерживает только привязку к Iterables, таким как массивы.

Доступ к XMLHttpRequest в 'http://localhost:8080/api/employe' from origin' http://localhost:4200' заблокирован политикой CORS: No 'Access-Control-AllowЗаголовок -Origin 'присутствует на запрашиваемом ресурсе.

Answer 1

Какие данные вы получаете, когда печатаете свой ответ с помощью console.log(data);?

Из-за

Access to XMLHttpRequest at 'http://localhost:8080/api/employe' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

есть недопустимый ответ. Читайте о политике CORS весной https://spring.io/guides/gs/rest-service-cors/

Об угловой ошибке, вы хотите перебрать объект, поэтому вам нужно изменить тип pageEmployes

pageEmployes:any={};

на

pageEmployes: Employe[] = [];

Answer 2

Вы пытаетесь выполнить итерацию (зацикливание) объекта, не массив по образцу вашего кода.

Эта часть неверна:

pageEmployes:any={};

И должен быть изменен на:

pageEmployes: Employe[] = [];

"= {};"инициализирует новый объект .

"= [];"инициализирует новый итерируемый список

Answer 3

Вы пытаетесь перебрать объект, а не массив. Измените pageEmployes: any={} на pageEmployes = [].

И это return this.pageEmployee; не нужно, просто удалите его вместе с возвращаемым значением в функции.

функция с вызовом http изменится на:

loadEmployes() {    
     this.http.get("http://localhost:8080/api/employe").subscribe(
      data=>{
        console.log(data);
        this.pageEmployes = data;

      }, err=>{
        console.log(err);
      }
    );
  }