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

Question

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

我查看了现场代码示例（参见https://stackblitz.com/angular/vvxldjlmnna)，但并没有真正找到我做错的有影响的代码。

首先，我使用npm install Angular-in-memory-web-api--save安装了npm包。我已经检查了node_modules并看到它确实已经成功下载，正如CLI所提到的那样。检查package.json文件，可以看到在依赖项“angull-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 ]
})

在我的in-memory-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;
}

private dashboardDataUrl = 'api/dashboard';

constructor(private http: HttpClient) { }

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

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

对于DashboardReport类，我有：

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'

'api/dashboard'

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

        return { dashboard: DashboardReports };
    }
}