无法让 angular-in-memory-web-api 0.6.1 按照教程工作

Question

所以我遵循了 https://angular.io/tutorial/toh-pt6 中的教程。我已经根据我的具体情况定制了教程，它只是显示一个仪表板。当我使用本地模拟时，我的代码工作得很好。当我升级到内存网络 api 时，事情就出错了。

我收到的错误

我已经查看了实时代码示例（参考 https://stackblitz.com/angular/vvxldjlmnna），但无法真正找到我做错的影响代码。

首先，我使用 npm install angular-in-memory-web-api --save 安装了 npm 包。我已经检查了 node_modules 并看到这确实已成功下载，正如 CLI 所提到的那样。检查 package.json 文件，我可以在依赖项中看到 "angular-in-memory-web-api": "^0.6.1", 已添加

在 app.module.ts 中，我按以下特定顺序导入了这些模块：

@NgModule({
    FormsModule, 
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService), 
    // I also tried:
    // HttpClientInMemoryWebApiModule.forRoot(
    //     InMemoryDataService, { dataEncapsulation: false }
    // ),
    AppRoutingModule

我正在使用路由器插座来显示仪表板。为此，我使用了一个路由器模块：

const routes: Routes = [{ path: 'dashboard', component: DashboardComponent },
                        { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})

在我的内存中-data.service.ts文件

export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        const DashboardReports = [
            { id: 1, date: new Date(2018, 8, 3, 0, 0, 0, 0), overtime: 0, project: 'W31226', superintendent: 'Toon', km: 105, status: 1 },
            { id: 2, date: new Date(2018, 8, 4, 0, 0, 0, 0), overtime: 1.75, project: 'W31226', superintendent: 'Toon', km: 105, status: 2 }
        ];

        return {DashboardReports}; // I paid specific attention to the curly braces here
    }
}

// Overrides the genId method to ensure that a hero always has an id.
// If the DashboardReports array is empty,
// the method below returns the initial number (21).
// if the DashboardReports array is not empty, the method below returns the highest
// report id + 1.
genId(dashboardreport: DashboardReport[]): number {
    return dashboardreport.length > 0 ? Math.max(...dashboardreport.map(report => report.id)) + 1 : 21;
}

在我的 dashboard.service.ts 文件中，我注入 HttpClient 并从 api 调用仪表板数据，从 'rxjs' 和 HttpClient 导入 Observable来自“@angular/common/http”。这是仪表板服务：

private dashboardDataUrl = 'api/dashboard';

constructor(private http: HttpClient) { }

/** GET Dashboard Reports from the server */
getDashboardReports (): Observable<DashboardReport[]> {
    return this.http.get<DashboardReport[]>(this.dashboardDataUrl);
}

然后在 dasboard 组件中调用数据服务：

ngOnInit() {
   this.getReports();
}
getReports(): void {
    this.dashboardService.getDashboardReports().subscribe(reports => this.dashboardReports = reports);
}

对于 DashboardReport class 我有：

export class DashboardReport{
    id: number;
    date: Date;
    overtime: number;
    project: string;
    superintendent: string;
    km: number;
    status: number;
}

Answer 1

您遇到的问题在于如何构造 createDb 函数中返回的对象。对于上下文，您将返回以下对象：

{ DashboardReports }

请注意，这只是以下内容的快捷方式：

{ DashboardReports: DashboardReports }

这最终配置了以下 URL：

'api/DashboardReports'

很明显这不是您想要的URL。你想要：

'api/dashboard'

为此，您需要重构要返回的对象。这是使其在您的示例中起作用的一种方法：

export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        const DashboardReports = ...;

        return { dashboard: DashboardReports };
    }
}

您会在本教程中注意到所使用的属性名称是 heroes 而 URL 是 api/heroes：属性名称定义了使用的 URL 端点。

无法让 angular-in-memory-web-api 0.6.1 按照教程工作

Can't get angular-in-memory-web-api 0.6.1 to work following the tutorial

typescript

angular

angular-in-memory-web-api