.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。 （免責聲明：我是作者。）項目模板支持您的項目設置開箱即用。