Typescript HttpClientInMemoryWebAPI模块错误。我能要两个吗？

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

“{body:{…}，url:“api/emotions”，标题：HttpHeaders，状态：404，状态文本：“未找到”}”

只需要一个就可以了。 如果我将两者解析为同一个forRoot。我得到：

错误TS2554:应为1-2个参数，但得到3个。

应用程序模块.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 { }

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


}
}

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

内存中的数据.service.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 { }

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


}
}

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

内存中的数据面.service.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 { }

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


}
}

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

---

我想您不能像下面这样有两个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 }
}

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

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' }
    ];

和在UI中

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

在下面的配置中，true代表什么？HttpClientInMemoryWebApiModule.forRoot（InMemoryDataService:true，{dataEncapsulation:false}）表示歉意，true不应该在那里，我只是尝试了一些东西。不用担心，您是否再次尝试删除它？它有效吗？只是好奇，有没有办法提供图像服务？我为你更新了答案，注意这是自以为是的，你并不是在提供原始图像，而是只提供位于你的项目文件夹中的图像路径，你可以使用该路径在UI上加载图像，但是你真的有这样的图片吗？谢谢你的帮助。向服务添加路径的方法不起作用。我愿意接受关于另一种图像服务方法的建议？谢谢，真的很难解决这个问题。你有没有看到任何具体的错误？可能在浏览器日志中？例如，如果图像的路径为“/assets/images/TheralDealPortfolioHero.jpg”，如果不起作用，您可以使用加载图像的代码创建一个新问题吗？