HttpClientInMemoryWebApiModule 错误。我可以有两个吗？

Question

我正在尝试实现两个不同的对象数据库（情绪和面孔）。但是当我在 app.module.ts 中同时实现两者时，我的控制台中出现以下错误：

"{body: {…}, url: "api/emotions", headers: HttpHeaders, status: 404, statusText: "Not Found"}"

只用一个就可以了。 如果我将两者解析为相同的 forRoot。我明白了：

错误 TS2554：预期 1-2 个参数，但得到了 3 个。

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { LoginComponent } from './login.component';
 import { DashboardComponent } from './dashboard.component';
 import { EmotionsComponent } from './emotions.component';
 import { EmotionSearchComponent } from './emotion-search.component';
 import { EmotionDetailComponent } from './emotion-detail.component';
 import { FaceService } from 'face.service';
 import { FacesComponent } from './faces.component';
 import { FaceSearchComponent } from './face-search.component';
 import { FaceDetailComponent } from './face-detail.component';
 import { EmotionService } from 'emotion.service';
 import { MessageService } from 'message.service';
 import {AppRoutingModule} from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';

 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService }  from 'in-memory-data.service';
 import { InMemoryDataFaceService }  from 'in-memory-data-face.service';



 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     DashboardComponent,
     EmotionsComponent,
     EmotionSearchComponent,
     EmotionDetailComponent,
     FacesComponent,
     FaceSearchComponent,
     FaceDetailComponent,

   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
      HttpClientInMemoryWebApiModule.forRoot( InMemoryDataService : true, { dataEncapsulation: false } )
      HttpClientInMemoryWebApiModule.forRoot( InMemoryDataFaceService, { dataEncapsulation: false } )


   ],
   providers: [ EmotionService, FaceService, MessageService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {

  createDb() {
    const emotions = [
      { id: 11, name: 'HAPPY' },
      { id: 12, name: 'SAD' },
      { id: 13, name: 'ANGRY' },
      { id: 14, name: 'EXCITED' },
      { id: 15, name: 'ANXIOUS' },

    ];
    return {emotions};


}
}

in-memory-data-face.service.ts

 import { InMemoryDbService } from 'angular-in-memory-web-api';

 export class InMemoryDataFaceService implements InMemoryDbService {

   createDb() {
     const faces = [
       { id: 11, name: 'HAPPY2' },
       { id: 12, name: 'SAD2' },
       { id: 13, name: 'ANGR2Y' },
       { id: 14, name: 'EXCITED' },
       { id: 15, name: 'ANXIOUS' },
       { id: 16, name: 'RubberMan' },
       { id: 17, name: 'Dynama' },
       { id: 18, name: 'Dr IQ' },
       { id: 19, name: 'Magma' },
       { id: 20, name: 'Tornado' }
     ];
     return {faces};
     }
     }

Answer 1

我猜你不能像下面那样有两个 HttpClientInMemoryWebApiModule.forRoot 声明，因为 forRoot() 配置方法采用 InMemoryDataService 并且从 api 看它不接受数组。

HttpClientInMemoryWebApiModule.forRoot( InMemoryDataService : true, { dataEncapsulation: false } )
HttpClientInMemoryWebApiModule.forRoot( InMemoryDataFaceService, { dataEncapsulation: false } )

我的建议是只有一个 InMemoryDataService 返回两个服务。

createDb() {
  let service1 = [];
  let service2 = [];
  return { service1, service1 }
}

您可以参考这个thread，它以类似的方式实现。我想这也是一种更简洁的实现方式，here 是在同一个数据服务中实现两个服务的另一个例子。

OPINIONATED - but do you really need to do this?

您打算在屏幕上显示图像吗？我认为您可以将图像存储在项目的 img 文件夹中，并在数据服务中提供它的 url，然后您可以在收到响应后使用它。

let images = [
      { id: 1, path: 'img/image1.png', },
      { id: 2, path: 'img/image1.png', },
      { id: 3, path: 'img/image1.png', },
      { id: 4, path: 'img/image1.png' }
    ];

在用户界面中

<ul>  
  <li *ngFor="#img of images">
    <img src="{{ img.path }}" />
  </li>
<ul>