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

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

符号“json”无法正确解析，可能是因为它位于无法访问的模块中

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

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 和 @987654329 @ 不幸的是，作为 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';

并更改将类型响应添加到您的地图功能，如下所示：

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

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

providers:[ AccountService ]

在它的配置中定义。

希望对你有帮助