Угловых 2 - отображение результатов после запроса HTTP (Service)

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