Получение данных с локального хоста с использованием Angular и Spring Boot

Question

Я работаю над созданием веб-приложения, используя Angular и Spring Boot. Я пытаюсь получить данные от localhost, но ничего не получаю.

Это данные json с сервера

А это мой сервис ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {map, catchError} from "rxjs/operators";
import { Observable, throwError } from 'rxjs';
import {Entreprise} from '../modules/entreprise';

@Injectable({
  providedIn: 'root'
})
export class EntrepriseService {

  constructor(private http:HttpClient) {  }


  public getEntreprises():Observable<Entreprise>{

    return this.http.get<Entreprise>("http://localhost:8080/entreprises/all");

            }

}

А это компонент ts :

import { Component, OnInit } from '@angular/core';
import { EntrepriseService } from '../services/entreprise.service';
import {Entreprise} from '../modules/entreprise';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {

entreprises:Entreprise;


  constructor(private entrepriseService:EntrepriseService) { }

  public onGetEntreprises(){

    return this.entrepriseService.getEntreprises().
   subscribe(data =>{
      this.entreprises = data;

      console.log(data);
    });

  }

  ngOnInit(): void {



  }

}

И это html шаблон

<h4>entreprises</h4>
<button (click)="onGetEntreprises()">get </button>

<p *ngFor="let ee of entreprises">{{ee.content.name}}</p>

И эту ошибку я получаю, когда нажимаю на кнопку

Answer 1

Прежде всего, вы должны добавить *ngIf к вашему тегу p, поскольку вы можете получить нулевые ошибки, если массив Enterprise не инициализирован (это async => вызов API).

---

Кроме того, это реальная проблема, вы определили одну ссылку на класс модели, а не массив, который фактически является тем, что возвращается вашим бэкэндом.

Возможно, это будет Лучше попрактиковаться, если вы сделали это:

this.enterprise = data.content

Хотя this.enterprises выглядит примерно так:

enterprises: Enterprise[];

---

Более того, вы, вероятно, не реализовали политику CORS для Весенняя сторона вещей. Вот хорошая статья об этом: CORS с пружиной . В целях тестирования добавьте @CrossOrigin(origins = "*") к вашему @RestController классу. Это хорошо для разработки, но в производственной среде вы не должны делать это, так как это позволит всем источникам запрашивать ваш API.

---

Дополнительные советы:

• Убедитесь, что у классов вашей модели на стороне Angular действительно есть все поля, которые происходят из бэкэнда.
• Вы уверены, что импортировали HttpClientModule?

---

Обновите свой вопрос, чтобы сообщить мне, работает ли он.