角2 - HTTP請求（服務）後，顯示結果

Question

我想重複我的結果我ngFor - 它不是那麼直觀像角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) {} 
} 

在JS的典型結果於：

{ 
"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); 
} 

編輯

如果你想從可觀察收到完整的對象，我看到了兩種方法來做到這一點：

• 明確訂閱：

  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"> 
  

的