Question

我正在尝试像这样使用HttpClient从angular7的后端检索数据：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    constructor(private http:HttpClient){}

    ngOnInit(){
        this.callTesting().subscribe(users => {
            console.log('users is ', users);
        })
    }

    callTesting(){
        console.log('call testing ');
        return this.http.get('https://ibomyangular.azurewebsites.net/api/Courses');
    }
}

但出现以下错误：

{
  "body": {
    "error": "Collection 'Courses' not found"
  },
  "url": "https://myangular.azurewebsites.net/api/Courses",
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 404,
  "statusText": "Not Found"
}

如果我将网址粘贴到浏览器https://myangular.azurewebsites.net/api/Courses中，则json会加载。用邮递员的方式获取值。

我认为这是因为CORS造成的，所以我添加了代理json，例如：

{
  "api/Courses": {
    "target": "https://myangular.azurewebsites.net",
    "secure": false
  },
  "changeOrigin": true
}

但仍然没有获得价值。在package.json中，我是这样添加开始的：

"start": "ng serve --proxy-config proxy.conf.json", 仍然没有运气。我还想念什么？有人帮我吗？

谢谢。

Answer 1

在我从后端获得真正的api之前，我先在angular7中使用了HttpClientInMemoryWebApiModule，然后在我评论了模块导入后它就可以正常工作了。

谢谢！

Answer 2

请找到以下代码。对我来说，它的工作正常：

**create interface for response data type:**
export interface Apitype {
id:any;
name:any;
description:any;
subjectId:any;
subjectTypeId:any;
subjectLevelId:any;
subjectOptionId:any;
languageId:any;
}

**create service class for api call:**
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Apitype} from './Apitype';

@Injectable()
export class ApimiddleService {

  constructor(private http: HttpClient) { }

  searchApi(){
    console.log("calling api");
//typed api call
return this.http.get<Apitype>('https://ibomyangular.azurewebsites.net/api/Courses');
  }

}

**Calling and subscribing the data ,searchapi() in apimiddle service class from app.component.ts file**
import { Component } from '@angular/core';
import { ApimiddleService } from './apimiddle.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
data :any;
constructor(private apiserv:ApimiddleService){

}
  ngOnInit(){
   console.log("calling ngOnInit");
 this.apiserv.searchApi().subscribe(data=>
      {
        console.log(data);
        this.data=data;
      });
  }

}

**view:app.component.html**
<div class="containner">
<div class="card" style="width: 18rem;" *ngFor="let course of data">
  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item active">{{course.id}}</li>
    <li class="list-group-item">{{course.name}}</li>
    <li class="list-group-item">{{course.description}}</li>
    <li class="list-group-item">{{course.subjectId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.subjectLevelId}}</li>
    <li class="list-group-item">{{course.subjectOptionId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.languageId}}</li>
  </ul>
</div>
</div>

无法从后端获取数据得到404

2 个答案: