角度6 HttpClient

Question

我创建了一个后端REST API，我认为它可以正常工作。我认为它工作正常，因为当我在我的网络浏览器中导航到http://localhost:43188/api/cat时，我得到一个打开/保存对话框，当我选择保存时，我得到一个包含以下内容的cat.json文件：

[{"name":"Aap"},{"name":"Noot"},{"name":"Mies"}]

然后我创建了一个Angular6（前端）应用程序（qazxsw poi）并添加了一个cat组件（qazxsw poi）并将文件ng new angular-project更改为：

ng g c cat

并将我的app.module.ts更改为

cat.component.ts

但是，当我现在添加

import { Component, OnInit } from '@angular/core';
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";
import * as _ from 'lodash';

interface Cat { 
  name: string;
}

@Component({
  selector: 'app-cat',
  template: ` 
    <ul *ngIf="cats$ | async as cats else noData"> 
      <li *ngFor="let cat of cats"> 
        {{cat.name}} 
      </li>  
    </ul> 
    <ng-template #noData>No Data Available</ng-template>
  `})

export class CatComponent implements OnInit {

  cats$: Observable<Cat[]>;

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.cats$ = this.http.get<Cat[]>('http://localhost:43188/api/cat');
  }

}

到我的app.component.html运行我的Angular应用程序时，我得到“No Data Available”。

知道我做错了什么吗？

Answer 1

请求时，请检查浏览器开发工具的网络选项卡。

除非您的Angular应用程序也在端口43188上运行，否则您几乎肯定会遇到CORS问题，其解决方案已在此处多次发布。