Question

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

“{body：{...}，url：”api / emotions“，标题：HttpHeaders，状态：404，statusText：”未找到“}” < / p>

只用一个就可以正常工作。如果我将两者解析为同一个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 { }

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


}
}

内存数据-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' }
    ];

在UI中

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

HttpClientInMemoryWebApiModule错误。我可以两个吗？

1 个答案: