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

【问题标题】：Cannot convert http request to observable array Angular 2无法将http请求转换为可观察数组Angular 2
【发布时间】：2017-01-16 18:05:44
【问题描述】：

我一直在关注Tour of Heroes chapter on http calls，并试图用不同的 API 实现类似的东西。但是，我收到以下错误：

找不到类型为“Bond Street 1”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

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

我的服务如下所示，并在我控制台记录结果时工作

  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
}

【问题讨论】：

标签： json api angular reactive-programming

【解决方案1】：

看起来您的服务或 HTTP 请求实际上并未发送数组，而是发送单个对象。例如，我运行了这段代码：

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 {}`

并得到同样的错误。但是将 bikestand 更改为实际数组（通过在其周围放置方括号），我会得到正确的结果。

【讨论】：

谢谢两位。正如您提到的，在我的服务中将 return b.json() as BikeStand[]; 更改为 return [b.json()] as BikeStand[]; 解决了这个问题。尽管将其转换为 BikeStand[] 并不会自动将输出转换为数组，但我感到很惊讶
Casting 不会进行转换，你只是在告诉 TypeScript '相信我，这个方法返回 any 但我知道里面是 Bikestand[]，所以请这样对待它。

【解决方案2】：

如错误所述，您尝试使用 *ngFor 而不是 array 迭代 object。您正在使用/返回的 api 是一个对象。

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

改为return b.json().data。

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

【讨论】：