[解決済み] Angular 8 NgForはArray errorやAcces Control Allow originなどのIterableへのバインディングのみをサポートしています。

質問

あるモデルがあります。

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

employees.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;
  }

employees.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();
    }

この場合、エラーが発生します。

ERROR Error: Object'型のオブジェクト '[object Object]' をサポートしている差分が見つかりません。NgFor は配列のような Iterable へのバインディングのみをサポートします。

でのXMLHttpRequestへのアクセスは、' http://localhost:8080/api/employe ' からオリジン ' http://localhost:4200 はCORSポリシーによってブロックされました。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。

解決方法は？

オブジェクトを反復（ループ）させようとしている。 ではなく このコード例からすると、配列ですね。

この部分は誤りです。

pageEmployes:any={};

と変更する必要があります。

pageEmployes: Employe[] = [];

を初期化します。 オブジェクト .

"= [];" は新しい反復記号を初期化します。 リスト