Angular 5中InMemoryDbService集合嵌入对象失效问题

别担心，InMemoryDbService本身是支持嵌套对象结构的，你遇到的失效大概率是常见的配置或写法问题，我们一步步来排查解决：

1. 先确认createDb的核心写法是否正确 #

很多时候问题出在没有正确返回数据集结构，或者语法细节上。先把你的代码调整成标准写法：

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const my_search = [
      { 
        id: 555, 
        firstName: 'fred', 
        lastName: 'flintstone', 
        extraData: { 
          extrathingie: 'hi' 
        } 
      }
    ];
    // 关键：必须返回键值对对象，键名对应你的API路由前缀
    return { my_search };
  }
}

这里要注意两个细节：

• 虽然属性加单引号不影响，但TypeScript里更推荐直接写无引号的属性名，避免不必要的语法问题
• 绝对不能直接返回数组，必须把数组包裹在一个对象里返回——InMemoryWebApi需要用这个键名生成对应的REST接口（比如/api/my_search）

2. 检查HttpClient的请求逻辑 #

如果createDb没问题，那大概率是请求时的路径或数据处理出错了。示例请求代码如下：

// 在你的组件或数据服务中
constructor(private http: HttpClient) {}

fetchMySearchData() {
  // 注意路径要匹配createDb返回的键名，默认前缀是/api
  this.http.get<{id: number, firstName: string, lastName: string, extraData: {extrathingie: string}}[]>('/api/my_search')
    .subscribe(data => {
      // 打印嵌套对象验证是否存在
      console.log(data[0].extraData.extrathingie);
    });
}

你可以直接在浏览器地址栏访问/api/my_search，查看返回的JSON是否包含extraData字段：

• 如果能看到，说明数据存储正常，问题出在前端代码的处理逻辑
• 如果看不到，回到createDb检查是否正确返回了包裹数组的对象

3. 特殊情况：调整InMemoryWebApi的配置 #

如果上面两步都没问题，但嵌套对象还是丢失，可能是默认的序列化机制影响了数据结构。你可以在导入模块时关闭序列化：

// 在AppModule中
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
      // 关闭自动序列化，确保嵌套对象完整返回
      serialize: false,
      delay: 500,
      passThruUnknownUrl: true
    })
  ]
})
export class AppModule { }

serialize: false会让InMemoryWebApi直接返回原始的对象结构，跳过默认的序列化处理，这通常能解决嵌套对象丢失的问题。

内容的提问来源于stack exchange，提问作者Armando Perea