无法将http请求转换为可观察到的数组Angular 2

Question

我一直关注http调用方面的“英雄之旅”一章，并尝试使用其他API来实现类似的功能。 但是，出现以下错误：

找不到类型为“邦德街1”的其他支持对象“ [object Object]”。 NgFor仅支持绑定到Iterables，例如数组。

关于这为什么的任何线索？

我的服务如下所示，并且在我进行console.log结果时可以正常工作

  search(stationNumber: number): Observable<BikeStand[]> {
    return this.http.get(`APIURL${stationNumber}`)
      .map((b: Response) => {
        console.log(b.json() as BikeStand[])
        return b.json() as BikeStand[];
      });
  }

我的组件如下所示

export class BikestandSearchComponent implements OnInit {

  bikestands: Observable<BikeStand[]>;
  private searchTerms = new Subject<number>();

  constructor(private bikestandSearchService: BikestandSearchService) { }

  search(term: number): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.bikestands = this.searchTerms
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term => term ? this.bikestandSearchService.search(term) : Observable.of<BikeStand[]>([]))
      .catch(error => {
        console.log(error);
        return Observable.of<BikeStand[]>([])
      })
  }

我的观点是这样的

<div id="search-component">
  <h4>Bikestand search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
  <div *ngFor="let bikestand of bikestands | async">{{bikestand.name}}</div>
</div>

我给定键的api如下所示

{
number: 1,
name: "Bond Street 1",
address: "Street",
position: {
lat: 55.340962,
lng: -6.3
},
banking: false,
bonus: false,
status: "OPEN",
contract_name: "City",
bike_stands: 29,
available_bike_stands: 19,
available_bikes: 10,
last_update: 1473356300000
}

Answer 1

由于错误状态，您尝试使用*ngFor而不是array遍历object 。 您正在使用/返回的api是一个对象。

检查console.log(b.json() as BikeStand[])返回具有某些data属性的对象。 如果为真

return b.json().data代替。

我们想从对象中提取数组以进行迭代。

Answer 2

看来您的服务或HTTP请求实际上不是在发送数组，而是在发送单个Object。 例如，我运行以下代码：

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <p *ngFor="let bike of bikestand">{{bike.name}}</p>
    </div>
  `,
})
export class App {

  bikestand:any = {
    number: 1,
    name: "Bond Street 1",
    address: "Street",
    position: {
      lat: 55.340962,
      lng: -6.3
    },
    banking: false,
    bonus: false,
    status: "OPEN",
    contract_name: "City",
    bike_stands: 29,
    available_bike_stands: 19,
    available_bikes: 10,
    last_update: 1473356300000
  };

  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}`

并得到了相同的错误。 但是将自行车架更改为实际的阵列（通过在其周围放置方括号），我会得到正确的结果。