Angular 2 - 在 http 请求后显示结果（服务）

Question

我正在尝试在我的 ngFor 中迭代我的结果 - 它不像 Angular 那样直观 1. 我有以下内容：

search.service.ts

import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {

  constructor( private _http: Http ) {

  }

  DoGeneralSearch(s){   
    return this._http.get('http://localhost:6000/search?q=' + s)
     .map((res:Response) => res.json())
  } 
}

typeahead.ts

import {Component, Input, OnChanges} from "angular2/core";
import {SearchService} from "../../../services/search.service";

@Component({
  selector: "typeahead",
  providers: [SearchService],
  template : `
    <div>{{searchSvc | async | json}}</div>
    <div id="typeaheadRooms" *ngIf="searchSvc">
      <div class="typeaheadRowRooms" *ngFor="#item of searchSvc?.rooms">
        <div class="typeaheadRoomTitle">{{item.name}}}</div>
      </div>
      <div class="typeaheadRowRooms" *ngFor="#item of searchSvc?.colors">
        <div class="typeaheadRoomTitle">{{item.name}}}</div>
      </div>
`,
})
export class TypeaheadComponent implements OnChanges {

  @Input() txt: string;
  display = false;

  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    var search = changes['txt'].currentValue;
    if(search.length > 2) {
        this.display = true;
        this.searchSvc = this._searchService.DoGeneralSearch(search);
    }
    else
    {
        this.display = false;
    }
  }

  constructor(private _searchService: SearchService) {}
}

json 中的典型结果：

{  
"max":20,
"queryString":"chem",
"rooms":[  
  {  
     "name":"Lima"
  },
  {  
     "name":"Delta"
  }
 ],
"colors":[  
  {  
     "name":"Red"
  },
  {  
     "name":"Lime"
  }
 ]

}

发生了什么事？好吧，{{searchSvc | async | json}} 告诉我结果。但是 ngFor：没有 :(

有什么线索吗？提前谢谢你！！！

Answer 1

在这种情况下，你需要使用这个：

<div class="typeaheadRowRooms" *ngFor="#item of searchSvc | async">

并像这样更新您的服务：

DoGeneralSearch(s){   
  return this._http.get('http://localhost:6000/search?q=' + s)
     .map((res:Response) => res.json().rooms);
}

编辑

如果你想从 observable 接收完整的对象，我看到了两种方法：

显式订阅：

this._searchService.DoGeneralSearch(search).subscribe(
  (data) => {
    this.searchSvc = data;
  }
);

并在模板中

<div class="typeaheadRowRooms" *ngFor="#item of searchSvc?.rooms">

获取rooms数据的自定义管道：

@Pipe({name: 'field'})
export class FieldPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    return value[args[0]];
  }
}

并在模板中

<div class="typeaheadRowRooms" *ngFor="#item of searchSvc | async | field:rooms">

Angular 2 - 在 http 请求后显示结果（服务）

Angular 2 - displaying results after http request (Service)

typescript

angular

angular2-services

angular2-http