时间戳

首页 > 解决方案 > Angular 7，如何处理对 asp.net web api 的多个调用

angular - Angular 7，如何处理对 asp.net web api 的多个调用

问题描述

我正在学习 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 但不同的功能？

标签： angulartypescript

解决方案

您的服务返回一个对象，但您需要一个数组。当您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[]>

推荐阅读