Angular 404使用角度inMemoryWebApi

我现在用的是Angular 7

在动态表单上浏览有角度的网页

要使用inMemoryWebAPI存储数据。 以下是关于inMemoryWebApi的两个不同教程 和

我好像少了一些水管。我在控制台中只得到一个404错误

我在名为sb-doc-field.data.service.ts的文件中定义了数据

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

@Injectable({
  providedIn: 'root'
})
export class sbDocFieldDataService implements InMemoryDbService {

  constructor() { }

 createDb() {

//these 4  fields belong to the same  docInstance
let docFields = [
  {   id: 10, fieldName: 'Property Name', description: 'Property Name', fieldType: 'text' }
  , {   id: 11, fieldName: 'Proeprty Type', description: 'MF/SF/COMM', fieldType: 'list' }
  , {   id: 12, fieldName: 'Close Date', description: 'When will you close?', fieldType: 'date' }
  , {   id: 13, fieldName: 'Purchase Price', description: 'Suggested Price', fieldType: 'number' }
];
return { docFields: docFields  };

} }

我的数据服务看起来像这样

  import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { InMemoryDbService} from 'angular-in-memory-web-api'
import { catchError, map, tap } from 'rxjs/operators';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

  //class will provide crud API for field meta data used when building docs
export class sbDocFieldService {

  SERVER_URL: string = "http://fakeUrl.DoesntMatter/api/";
  docFieldsName: string = "docFields";
  constructor(private httpClient: HttpClient) {
  }

  public getFieldsForDocument() {
    return this.httpClient.get<any[]>(this.SERVER_URL + this.docFieldsName )
      .pipe(
        catchError(this.handleError<any[]>('getFieldsForDocument', []))
      );;
  }

  public getField(fieldId) {
    return this.httpClient.get(`${this.SERVER_URL}${this.docFieldsName}/${fieldId}`);

  }

我的组件看起来像这样

    import { Component, OnInit } from '@angular/core';
import { sbDocFieldService } from '../sb-doc-field.service';

@Component({
  selector: 'app-analysis',
  templateUrl: './analysis.component.html',
  styleUrls: ['./analysis.component.css']
})
export class  AnalysisComponent implements OnInit {

  fields: any[] = [];
  constructor(private fieldService: sbDocFieldService) { }

  ngOnInit() {
    this.getAllDocFields();
  }  //ngOnInit

  getAllDocFields() {
    this.fieldService.getFieldsForDocument(4).subscribe(
      (data: any[]) => {
        console.log(data);
        this.fields = data;
      });

  }  //getAllDocFields

}

以及app.module.ts的部分内容

imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
   RouterModule.forRoot(routes),  //, { enableTracing: true }
    HttpClientModule,
           InMemoryWebApiModule.forRoot(sbDocFieldDataService),
    HttpClientInMemoryWebApiModule.forRoot(sbDocFieldDataService)
  ],
  providers: [
    EventService,
    {
      provide: SLIMSCROLL_DEFAULTS,
      useValue: {
        alwaysVisible : false
      }
    },
    sbDocFieldDataService
  ],

我不确定我是否需要导入[]中的两个条目。 我不确定我是否需要我的服务来提供服务，但我想我需要

刷新页面时，数据服务返回一个4元素数组

当逻辑返回到我的订阅调用时，有一个数组，但它是空的

我确保数组名=url标记“docFields”，但更改url标记不会真正影响任何内容

404必须是url的一部分，但我没有看到它。 我在示例中使用了URL，但我也看到他们在哪里说这无关紧要

我已经复习了可能重复的问题。我只是返回一个数组。我已经更新了我的代码列表，以包括当前

返回{docFields}

我也试过了

return {docFields : docFields[]}
and 
return {docFields : any[]}
and 
return {docFields : docFields}
and 
return {docFields : any}

---

我正在做什么/没有做什么导致WebAPI生成404？

问题是我返回的是数组，而不是data.service对象中的对象

InMemoryWebAPI的另一个容易忽略的部分是，您使用的url必须与数组的名称相对应

前

在你的服务中，你必须要求

http://someurl/api/docFields

在玩游戏时，代码试图识别影响结果的因素 更改了服务，使docFieldsName=docFieldsX 这似乎既没有伤害也没有帮助，所以我离开了它。 一旦重复的答案建议我更改返回类型，这现在是一个新问题。啊

SERVER_URL: string = "http://fakeUrl.DoesntMatter/api/";
  docFieldsName: string = "docFieldsX";
  constructor(private httpClient: HttpClient) {
  }

  public getFieldsForDocument() {
    return this.httpClient.get<any[]>(this.SERVER_URL + this.docFieldsName )
      .pipe(
        catchError(this.handleError<any[]>('getFieldsForDocument', []))
      );;
  }

最终，在服务调用上有一个错误处理程序帮助我解决了这个问题

这就是代码。如果你有类似的问题，考虑在你的服务中包含这个代码，这样你可以更好地了解这个问题是什么。p>

public getDocFields() {
    return this.httpClient.get<any[]>(this.SERVER_URL + this.docFieldsName )
      .pipe(
        catchError(this.handleError<any[]>('getFieldsForDocument', []))
      );;
  }


  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  } //hanldeError

虽然问题是InMemoryDB文件中的返回类型，但返回的错误如下所示 body.error:找不到集合“docFields” 现状：404 statusText:未找到 网址：

希望这对其他人有帮助

---

@柯克·拉金，我不知道如何给你评分，除了评论上的+1。你让我走上了正轨

可能是重复的感谢，我需要更正我的返回声明。这个问题仍然存在。我已经更新了我的帖子，加入了一些我很高兴能帮上忙的事情。如果你愿意，你可以投票表决我链接到的答案

SERVER_URL: string = "http://fakeUrl.DoesntMatter/api/";
  docFieldsName: string = "docFieldsX";
  constructor(private httpClient: HttpClient) {
  }

  public getFieldsForDocument() {
    return this.httpClient.get<any[]>(this.SERVER_URL + this.docFieldsName )
      .pipe(
        catchError(this.handleError<any[]>('getFieldsForDocument', []))
      );;
  }

public getDocFields() {
    return this.httpClient.get<any[]>(this.SERVER_URL + this.docFieldsName )
      .pipe(
        catchError(this.handleError<any[]>('getFieldsForDocument', []))
      );;
  }


  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  } //hanldeError