1
votes

Angular 8 NgFor ne prend en charge que la liaison aux Iterables comme l'erreur Arrays et le contrôle d'accès Autoriser l'origine

J'ai un modèle:

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

employees.component.ts[

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

employés .component.html

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

CollaborateurController.java

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

Cela lance erreur moi:

ERREUR Erreur: impossible de trouver un autre objet de support '[objet objet]' de type 'objet'. NgFor ne prend en charge que la liaison aux Iterables tels que les tableaux.

Accès à XMLHttpRequest à ' http: // localhost: 8080 / api / employe ' depuis l'origine ' http: // localhost: 4200 ' a été bloqué par la stratégie CORS: Non 'Access-Control-Allow-Origin' l'en-tête est présent sur la ressource demandée.

angular spring-restcontroller cross-origin-read-blocking

0 commentaires

3 Réponses :

1
votes

Vous essayez de parcourir un objet et non un tableau. Remplacez pageEmployes: any = {} par pageEmployes = [] .

Et ce renvoie this.pageEmployee; n'est pas nécessaire, il suffit de le supprimer avec la valeur de retour dans la fonction.

fonction avec http changement d'appel à ceci:

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

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

3 commentaires

Le ngIf est ici redondant. Il suffit d'initialiser pageEmployes en tant que tableau vide car le ngFor n'aura pas de données à parcourir et n'affichera donc rien.

Oh ouais ok je l'ai XD

Je veux afficher les données de réponse dans le front-end et cela ne fonctionne pas: /

1
votes

Quelles données obtenez-vous lorsque vous imprimez votre réponse avec console.log (data); ?

En raison de

pageEmployes: Employe[] = [];

il y a réponse invalide. En savoir plus sur la politique CORS au printemps https://spring.io/guides/gs/rest-service-cors/

À propos de l'erreur angulaire, vous souhaitez parcourir l'objet, vous devez donc changer le type de pageEmployes

pageEmployes:any={};

dans

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.

1 commentaires

Ok je vais l'essayer

4
votes

Vous essayez d'itérer (boucler) un objet, pas un tableau d'après votre exemple de code.

Cette partie est fausse:

pageEmployes: Employe[] = [];

2 commentaires

@Kindth Heureux d'avoir pu vous aider, n'oubliez pas de marquer la réponse comme solution. Cela peut aider d'autres personnes ayant des problèmes similaires à identifier rapidement une bonne réponse

Cela fonctionne également, je devrais ajouter cette ligne sur @SpringBootApplication principale (exclude = {org.springframework.boot.autoconfigure.security.servlet.Se‌ curityAutoConfigurat‌ ion.class}) pour les personnes qui utilisent la sécurité de printemps