asp.net - http.get 响应对象 - 无法访问 json()？

Question

我正在关注这个教学视频，Building web apps powered by Angular 2.x using Visual Studio 2017 ，51:00 左右是我所在的部分，我在此源文件中遇到问题:

https://github.com/CRANK211/vs17-ng2-dnc/blob/master/3%20-%20with-data/components/shared/account.service.ts#L18

有了这个功能:

getAccountSummaries() {
  return this.http.get('api/Bank/GetAccountSummaries')
    .map(response => response.json() as AccountSummary[])
    .toPromise();
}

我在 Visual Studio 中的 .json() 上收到红色文本，上面写着

Symbol 'json' cannot be properly resolved, probably because it is located in inaccessible module

当我尝试运行该应用程序时，我收到异常消息:

System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!

按照教程，我使用了与讲师相同的模板，但我认为从那以后一定发生了一些变化，因为他只有一个 app.module.ts 而我的模板有四个:app.module.client.ts、app.module.server.ts 和 app.module.shared.ts 不幸的是，作为 ASP 新手.NET Core 和 Angular2 我不知道它们为什么不同或意义可能是什么。

到目前为止，我已经取得了成功，只需将他对他的 app.module.ts 所做的任何更改更改为我的 app.module.shared.ts可以在这里看到:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { AccountListComponent } from './components/account/account-list/account-list.component';
import { AccountSummaryComponent } from './components/account/account-summary/account-summary.component';
import { AccountDetailComponent } from './components/account/account-detail/account-detail.component';
import { FormatAccountNumberPipe } from './components/shared/format-account-number.pipe';
import { AccountActivityComponent } from './components/account/acccount-activity/account-activity.component';
import { AccountService } from './components/shared/account.service';


export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        HeaderComponent,
        AccountListComponent,
        AccountDetailComponent,
        AccountSummaryComponent,
        AccountActivityComponent,
        FormatAccountNumberPipe
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: 'account', pathMatch: 'full' },
            { path: 'account', component: AccountListComponent },
            { path: 'detail/:id', component: AccountDetailComponent },
            { path: '**', redirectTo: 'account' }
        ])
    ],
    providers: [ AccountService ]
};

不幸的是，在这 .json() 行之前，一切都编译得很好并且像他一样工作。

我该如何解决？

Answer 1

您从 Visual Studio 获得的红色文本可能是因为 VS 无法解析响应对象。当您将以下内容添加到文件中时，错误应该消失了

import { Response } from '@angular/http';

并像这样更改将 Response 类型添加到您的 map 函数:

getAccountSummaries() {
 return this.http.get('/api/Bank/GetAccountSummaries')
    .map((response: Response) => response.json() as AccountSummary[])
    .toPromise();
}

您遇到的缺少提供者的另一个问题可能是因为组件中使用了 AccountService，而该组件是模块的一部分，而该模块没有将 AccountService 定义为提供者。因此，请确保您拥有的每个模块都有

providers:[ AccountService ]

在其配置中定义。

希望对你有帮助