Asp.net web api .NET核心&x2B；Angular CLI应用程序-can'；t将数据从api传递到组件

我正在用Angular CLI构建一个ASP.NET核心应用程序

应用程序工作得很好，在VS中启动应用程序之前，我将预构建事件设置为ng build，它工作得很好。我还可以通过localhost:port/API/[controller]成功访问我的API（在本例中，它应该是联系人，因为它应该是一个联系人簿）

现在，我试图让Angular直接从API获取数据。出于这个原因，我创建了一个IContact接口，一个ContactService，并将它传递给ContactComponent，该组件应该显示它

我可能在这里犯了一个愚蠢的错误（我的技能非常基础），但由于某些原因，我甚至没有看到运行应用程序时通过网络日志输入的object.json（在尝试将其传递到视图之前，我试图确保首先从API获取数据）

我可能做错了什么（所以我鼓励你回答，即使你认为你可能在说一些愚蠢的显而易见的东西），但我的问题是：

• 我下面的代码是否应该工作（虽然没有附加导入，但我想我已经获得了所有导入，但请检查我；-）？我说的不是超高效的东西，只是完成工作的基础
• 查看getAPI服务是否正常工作的最佳方法是什么？如果您只是将服务导入组件并尝试调用get方法，那么这是否就是浏览器中的网络日志记录？还是有别的办法
• 我对应用程序总体架构的逻辑和方法是否正确，或者我有什么地方出错了？：-）

联系人：http://www.service.ts.cn

const API_URL = environment.apiUrl;

@Injectable()
export class ContactService {

constructor(private http: Http) { }

public getContacts(): Observable<IContact[]> {
    return this.http.get(API_URL)
        .map((response: Response) => <IContact[]>response.json())
    .catch(this.handleError);
}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error')
  }
}

contact.component.ts

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

export class ContactComponent implements OnInit {

    private _contactService: ContactService;
    private contactlist: IContact[];

    constructor() {
    }

    public ngOnInit() {
        this._contactService.getContacts()
            .subscribe((contacts) => { this.contactlist = contacts });

  }
}

---

任何其他代码要求或任何东西-让我知道。感谢所有反馈。谢谢

我稍微更改了您的代码

文件icontact.ts。我制作了

IContact

一个简单的字体。您可以使其成为支持对象形状的界面

export type IContact = string;

文件contact.service.ts。我们调用

/api/values

api，如果您遵循前面提到的教程，它将在新的ASP.NET核心Web api项目中默认创建

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map'
import { IContact } from "./icontact";

const API_URL = '/api/values'; // environment.apiUrl;

@Injectable()
export class ContactService {

  constructor(private http: Http) { }

  public getContacts(): Observable<IContact[]> {
    return this.http.get(API_URL)
      .map(response => <IContact[]>response.json());
  }
}

在Startup.cs中的Configure方法中，确保将

app.Use（…）

调用放在

app.UseStaticFiles（）之前

由于您通过ASP.NET核心中间件从wwwroot为Angular应用程序提供服务，因此Angular应用程序和Web API的主机相同，因此您不需要为该设置配置CORS

顺便说一句，您可能有兴趣看看Visual Studio市场上的。（免责声明：我是作者。）项目模板支持项目的开箱即用设置。
您得到API的答案了吗？您可以在浏览器中通过网络/调试部分进行检查吗？我不这么认为：我要查找的json应该提供5个不同的联系人，而不是一个；-）你考虑过CORS问题吗？我看不到你链接的图片上的任何内容。由于项目设置，这里不需要CORS-请参阅正确答案最后一段之前的内容。这只是一个错误的角度服务代码的问题！这已经做到了！非常感谢你！我终于看到了这个对象：我并没有完全按照您在这里所说的那样做，但是在contact组件上修复getContacts方法和构造函数完成了这项工作。现在我正在与显示器进行斗争，因为我无法使联系人正确显示在页面上；-）
import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map'
import { IContact } from "./icontact";

const API_URL = '/api/values'; // environment.apiUrl;

@Injectable()
export class ContactService {

  constructor(private http: Http) { }

  public getContacts(): Observable<IContact[]> {
    return this.http.get(API_URL)
      .map(response => <IContact[]>response.json());
  }
}

import { Component, OnInit } from "@angular/core";
import { ContactService } from "./contact.service";
import { IContact } from "./icontact";

@Component({
  selector: 'app-contact',
  template: '<div *ngFor="let contact of contactList">{{contact}}</div>',
  providers: [ContactService]
})

export class ContactComponent implements OnInit {

  private contactList: IContact[];

  constructor(private contactService: ContactService) { }

  public ngOnInit() {
    this.contactService.getContacts().subscribe(
      (contacts) => { this.contactList = contacts; },
      (error) => { console.log(error); }
    );
  }
}

<app-contact>Wait...</app-contact>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ContactComponent } from "./contact.component";

@NgModule({
  declarations: [AppComponent, ContactComponent],
  imports: [BrowserModule, HttpModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }