2

我有一个模型：

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

雇员.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;
  }

员工.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，例如 Arrays。

从源“ http://localhost:4200 ”访问“ http://localhost:8080/api/employe ”处的 XMLHttpRequest已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源。

4

4 回答 4

8

从代码示例的外观来看，您正在尝试迭代（循环）一个对象，而不是一个数组。

这部分是错误的：

pageEmployes:any={};

并应改为：

pageEmployes: Employe[] = [];

“= {};” 初始化一个新对象。

“= [];” 初始化一个新的可迭代列表

于 2019-10-04T22:32:44.803 回答
2

您尝试遍历对象而不是数组。更改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);
      }
    );
  }
于 2019-10-04T22:24:51.730 回答
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/

关于 Angular 错误，您想迭代对象，因此您需要更改类型pageEmployes

pageEmployes:any={};

进入

pageEmployes: Employe[] = [];
于 2019-10-04T22:30:15.350 回答
1

我面临同样的错误。我正在迭代对象而不是数组，所以我以这种方式修复了它

从

 this.faqService.getFaq().subscribe((faqs:any)=>{
      this.faqs = faqs; // here i was trying to iterate over object 
    })

至

>   this.faqService.getFaq().subscribe((faqs:any)=>{
      this.faqs = faqs.data;
      
    })

Console.Log() 并仔细查看您的回复，然后遍历数组，您会很高兴

于 2021-12-22T10:26:30.470 回答