.NET Core + Angular-CLI应用程序 - 无法将数据从api传递到组件

Question

我正在使用此tutorial与Angular-CLI构建ASP .NET核心应用程序。

应用程序工作得很好，我在VS中启动应用程序之前已经完成预生成事件，它工作正常。我也可以通过localhost：port/api/[controller]成功获取我的API（在这种情况下，它应该是联系人，因为它应该是联系簿）。

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

我可能在这里犯了一个愚蠢的错误（我的技能是非常基本的），但由于某种原因，我甚至没有看到通过网络日志进入的对象.json当我运行应用程序时（在尝试通过之前它的观点，我试图确保我从API获取数据）。

我可能做错了什么（所以我鼓励你，即使你认为你可能会说无聊的，显而易见的东西，回复），但这里是我的问题：

• 如果下面的工作我的代码（不重视进口尽管如此，我想我得到了他们全部，但检查我;-)）？我不是说超级高效的东西，只是完成工作的基础。
• 什么是最好的方式来看看是否获得API的服务工作？如果您只是将服务导入组件并尝试调用get方法，那么这是否会在浏览器中进行网络日志记录？还是有另一种方式？
• 是我的逻辑和方法的应用程序的一般架构好还是我得到错误？ :-)

contact.service.ts

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') 
    } 
} 

icontact.ts

export interface IContact { 
id: number; 
firstName: string, 
lastName: string, 
address: string, 
telephone: string 
} 

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 }); 

    } 
} 

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

Answer 1

我稍微改变了你的代码。

文件icontact.ts。我制作了IContact一个简单的类型。你可以将它变成一个接口来支持你的对象形状。

export type IContact = string; 

文件contact.service.ts。如果您按照您提到的教程，我们将在默认情况下创建的/api/values API称为新的ASP.NET Core 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()); 
    } 
} 

文件contact.component.ts。模板只显示列表。

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.component.html。在应用程序页面上显示你的组件。

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

文件app.module.ts。导入HttpModule。修复了屏幕截图中的错误消息之一。

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 { } 

在配置方法Startup.cs，请确保你把app.Use(...)呼叫app.UseStaticFiles()之前。

由于您通过ASP.NET Core中间件从wwwroot提供您的Angular应用程序，因此主机与Angular应用程序和Web API相同，因此您无需为该设置配置CORS。

顺便说一下，您可能有兴趣查看Visual Studio Marketplace上的Angular CLI Templates。 （免责声明：我是作者。）项目模板支持您的项目设置开箱即用。