首页 文章

Angular 6 in-memory-api返回undefined

提问于
浏览
0

Problem: 我无法从我的in-memory-api服务中获取任何数据 . http get函数只返回'undefined' .

Summary of app: 我在data-store.service.ts,getAlert(id)中有一个函数,它调用backend-data.service函数,backendDataService.getAlert(id),并返回this.http.get(url) .

当调用backendDataService.getAlert(id)时,它会通过.pipe(catchError ...)错误,错误为undefined(控制台读取:"getAlert backend failure: undefined") .

这是错误的backendDataService调用:

getAlert(alertId: number): Observable<any> {
const url = '/alert/' + alertId;
return this.http
  .get(url)
  .pipe(catchError(this.handleError('getAlert', [])));
}

调用它时,将调用catchError()并将“undefined”记录为错误 .

的package.json

"@angular/core": "^6.1.7",
....
"angular-in-memory-web-api": "^0.6.1",
....

app.module.ts

@NgModule...

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule,
RouterModule.forRoot([]),

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

...
providers: [
{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE]
}
],
bootstrap: [AppComponent],
 entryComponents: [
 ConfirmationDialogComponent,
 DismissDialogComponent,
 DeviceNotesDialogComponent,
AccountNotesDialogComponent,
DatetimeRangePickerDialogComponent
]
...

数据存储服务.ts

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { BehaviorSubject } from 'rxjs';

import { BackendDataService } from './backend-data.service';

@Injectable({
providedIn: 'root'
})
export class DataStoreService {
private alertId: any;

public alert$: any = new BehaviorSubject([]);

constructor(
  private route: ActivatedRoute,
  public backendDataService: BackendDataService
) {
   this.getAlertId();
}

getAlertId() {
this.route.queryParams.subscribe(params => {
  this.alertId = params['aid'];
  if (this.alertId) {
    this.getAlert(this.alertId);
  }
  });
}

<<<<< THIS IS CALLS THE BACKEND FUNC THAT IS ERR >>>>>
getAlert(id: number) {  
 this.backendDataService.getAlert(id).subscribe(
   res => {
    const alertData: any = res;
    this.alert$.next(alertData);
  },
  err => console.log(`Error: ${err}`)
 );
}

后端数据-service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BackendDataService {
  private base_url: string = '/api/v1/';
  private alert_endpoint: string = 'alert/';

  constructor(private http: HttpClient) {}

  getAlert(alertId: number): Observable<any> {
    const url = '/alert/' + alertId;
    return this.http
      .get(url)
      .pipe(catchError(this.handleError('getAlert', [])));
   }
}

内存-data.service.ts

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

export class InMemoryDataService implements InMemoryDbService {
createDb() {
 const alert = [
   {
     id: 1492011
     ...more data...
   }
  ];
  return { alert };
 }
}

1 回答

  • 0

    网址必须是:

    api/alert/(id#)

    示例:api / alert / 1492011

    后端-data.service.ts

    getAlert(alertId: number): Observable<any> {
    const url = 'alert/api/' + alertId;
    return this.http
      .get(url)
      .pipe(catchError(this.handleError('getAlert', [])));
    }
    

相关问题