Question

我正在学习angular 7，我尝试从asp.net Web API加载多个对象列表。奇怪的是，如果我禁用一个呼叫，我可以得到一个列表，但不能得到另一个列表，但是在加载时我不能同时获得两个列表。这是我的代码：

我的组件：

import { Component, OnInit } from '@angular/core';
import { TrackerManagerService } from '../../services/tracker-manager.service';
import { AirlineManagerService } from '../../services/airline-manager.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './tracker-selection.component.html'
})
export class TrackerSelectionComponent implements OnInit {

  public TrackerAddModal;

  trackers: any = [];
  airlines: any = [];

  constructor(public airlineManagerService: AirlineManagerService,
    public trackerManagerService: TrackerManagerService, private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.getAllTrackers();
    this.getAllAirlines();
  }

  getAllTrackers() {
    this.trackers = [];
    this.trackerManagerService.getAllTrackers().subscribe((data: any[]) => {
  console.log(data);
  this.trackers = data;
});

  }

  getAllAirlines() {


       this.airlines = [];
this.airlineManagerService.getAllAirlines().subscribe((test: any[]) => {
      console.log(test);
      this.airlines = test;
    });
      }

}

我的跟踪器服务：

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

const endpoint = //Some http url;
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})
export class TrackerManagerService {

  constructor(private http: HttpClient) { }

  private extractData(res: Response) {
    console.log(res);
    let body = res;
    return body || {};
  }

  getAllTrackers(): Observable<any[]> {
    return this.http.get<any[]>(endpoint + 
   'tracker');//.pipe(map(this.extractData));
 }
}

我的航空公司服务：

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

const endpoint = //Some http url;
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})
export class AirlineManagerService {

  constructor(private http: HttpClient) { }

  private extractData(res: Response) {
    console.log(res);
    let body = res;
    return body || {};
  }

  getAllAirlines(): Observable<any[]> {
     return this.http.get<any[]>(endpoint + 
    'airline');//.pipe(map(this.extractData));
  }
}

如果我尝试打两个电话，我会在控制台中收到此错误：错误：尝试区分'[object Object]'时出错。仅允许数组和可迭代对象

谢谢。

更新：我更新了代码以精确地返回一个数组。我没有错误了，但是我无法得到两个列表，只有其中一个。也许是因为我同时调用了相同的Web API但功能不同？

Answer 1

您的服务返回一个对象，但是您需要一个数组。当您对某个对象执行ngFor时，会收到该错误。

您要声明数组：

trackers: any = [];
airlines: any = [];

但是您将对象分配给它们：

this.trackerManagerService.getAllTrackers().subscribe((data: {}) => {
      console.log(data);
      this.trackers = data;
    });

this.airlineManagerService.getAllAirlines().subscribe((test: {}) => {
      console.log(test);
      this.airlines = test;
    });

我不确定您的API返回什么，但是服务的签名应该是

getAllTrackers(): Observable<any[]>
getAllAirlines(): Observable<any[]>

Angular 7，如何处理对asp.net Web API的多次调用

1 个答案: