时间戳

首页 > 解决方案 > Http GET，角度

angular - Http GET，角度

问题描述

嗨，我已经实现了 get 方法，如下所示：

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

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

  constructor(private httpClient: HttpClient) { }

  private courseUrl: string = 'http://localhost:8080/api/v1/courses';

  public getCourses(): Observable<Course[]> {
    return this.httpClient.get<Course[]>(this.courseUrl);
  }

}

export interface Course {
  id: number;
  title: string;
  startTime: string;
  endTime: string;
  day: string;
  totalPlaces: number;
}

当然是我的pojo课

我的组件类的一部分：

import { Component, OnInit } from '@angular/core';
import * as Feather from 'feather-icons';
import { Course, CourseService } from '../services/course-services.service';
import { PositionEnum } from './position-enum';

@Component({
  selector: 'app-admin-dashboard',
  templateUrl: './admin-dashboard.component.html',
  styleUrls: ['./admin-dashboard.component.css']
})
export class AdminDashboardComponent implements OnInit {

  position: PositionEnum;
  course: Course[];

  constructor(private courseService: CourseService) { }

  public get positionEnum(): typeof PositionEnum {
    return PositionEnum;
  }

  ngOnInit(): void {
    this.courseService.getCourses().subscribe(value => {
      this.course = value;
    })
    Feather.replace();
  }

在 html 文件中，我试图获取有关它是否有效的任何信息，但经过几次尝试后，我什么也没看到。我试图通过这样的方式显示它：{{ course[0].id }} 或这个 {{ course['0'].id }}。我很确定 api 有效，因为我得到这样的响应：

[{"id":1,"title":"Analiza matematyczna","startTime":"12:00:00","endTime":"13:30:00","day":"MONDAY","totalPlaces":10},{"id":2,"title":"Programowanie obiektowe","startTime":"15:00:00","endTime":"16:00:00","day":"MONDAY","totalPlaces":15}]

更新：我发现错误：从源“http://localhost:4200”访问“http://localhost:8080/api/v1/courses”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制允许” -Origin' 标头存在于请求的资源上。有谁知道问题是什么？ 在此处输入图像描述

标签： angulartypescripthttpget

解决方案

请尝试添加标题Access-Control-Allow-Origin: *

另外，不要忘记授予 Cors 保护服务器的权限。你可以看看这个。带有 PHP 标头的跨域请求标头 (CORS)

推荐阅读