Question

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

应用程序运行良好，我在VS中启动应用程序之前获得了预构建事件，它运行正常。我也可以通过localhost成功访问我的API：port / api / [controller]（在这种情况下，它将是Contacts，因为它应该是一本联系簿）。

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

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

我可能做错了（所以我鼓励你回答，即使你认为你可能会说愚蠢明显的东西），但这是我的问题：

我的代码应该在下面工作（虽然不附加导入，我想我得到了所有这些但是检查我;-)）？我不是说超级高效的东西，只是完成工作的基础。
查看getAPI服务是否有效的最佳方法是什么？如果您只是将服务导入组件并尝试调用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 。如果您按照您提到的教程，我们会调用默认情况下在新的ASP.NET Core Web API项目中创建的/api/values 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。（免责声明：我是作者。）项目模板支持您开箱即用的项目设置。

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

1 个答案: