не работает отображение выбранных данных из API - Angular 8 - PullRequest
Новая
       53

не работает отображение выбранных данных из API - Angular 8

0 голосов
/ 04 апреля 2020

Я новичок в Angular и до сих пор не очень хорошо понимаю, как это работает. Я получил данные из API, который я построил. Это работает, потому что я проверял это в почтальоне. Я не могу отобразить их в своем angular приложении и не понимаю почему.

Мой api.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  private SERVER_URL  = 'http://localhost:8080/returnShelf';

  constructor(private httpClient: HttpClient) { }

  public get() {
    return this.httpClient.get(this.SERVER_URL);
  }


}

Мой home.component.ts : 

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  books = [];
  constructor(private apiService: ApiService) { }

  ngOnInit() {
        this.apiService.get().subscribe((data: any[]) => {
            console.log(data);
            this.books = data;
        });
  }

}

мой home.component. html: 

<div style="padding: 13px;">

  <div *ngFor="let book of books">
    <h2>{{book.title}}</h2>

      <p>
        {{book.author}}
      </p>

  </div>
</div>

Может кто-нибудь объяснить, почему я до сих пор не удается отобразить данные моих книг?

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Можете ли вы попробовать это? создайте файл proxy.conf. json в папке sr c и добавьте следующее содержимое: 

{
    "/api/*": {
        "target": "http://localhost:8080",
        "secure": false,
        "logLevel": "debug"
    }
}

Затем откройте файл angular. json и добавьте ключ proxyConfig под службой -> параметры, которые указывают на файл src / proxy.conf. json следующим образом: 

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
  ...
  }
}
0 голосов
/ 04 апреля 2020

Хорошо , я осмотрел inte rnet, и проблема в том, что мой бэкэнд не отображает CORS.

решение состояло в добавлении в ApiApplication. java corsConfigurer, таким образом: 

 @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**").allowedOrigins("http://localhost:4200");
                }
            };
        }

Спасибо всем за поддержку!

...