Angular 2 - отображение результатов после http-запроса (Сервис)

Я пытаюсь повторить свои результаты в моем 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: Нет :(

Любые подсказки? заранее спасибо !!!


typescript angular angular2-services angular2-http
person Marco Jr    schedule 10.03.2016    source источник
comment
Возможный дубликат Перебор строки json в Observable angular js 2   -  person Günter Zöchbauer    schedule 10.03.2016
comment
Нет, Гюнтер... не относится к моей ситуации. Но спасибо, потому что я добавил этот пост в закладки - будет очень полезен в будущем.   -  person Marco Jr    schedule 10.03.2016

Ответы (1)


arrow_upward
1
arrow_downward

В этом случае вам нужно использовать это:

<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">
person Thierry Templier    schedule 10.03.2016
comment
Еще раз привет, Терри ;) Ну... я отредактировал результат... на самом деле он может возвращать комнаты или цвета. если я установлю это на сервисе.. Я ограничусь только тем, чтобы захватить массив комнат :( Просто из любопытства я установил таким образом, чтобы проверить вашу асинхронность на ngFor, и это работает.. но мне действительно нужно перебирать разные ключи .... - person Marco Jr; 10.03.2016
comment
Почти готово ! Я только что добавил: все еще бросайте мне аннотацию No Directive, найденную на TypeaheadComponent - Что-то отсутствует? - person Marco Jr; 10.03.2016
comment
Кажется, в вашем компоненте TypeaheadComponent отсутствует аннотация @Component... Не могли бы вы дать мне соответствующий код? - person Thierry Templier; 10.03.2016
comment
Конечно ! [typeahead]: импорт {FieldPipe} из '../../_generics/field-pipe.component';______ @Component({ селектор: typeahead, провайдеры: [SearchService], каналы: [FieldPipe]... template : <div class="typeaheadRowRooms" *ngFor="#item of searchSvc | async | field:rooms"><div class="typeaheadRoomTitle">{{item.name}}</div></div> ____ класс экспорта TypeaheadComponent (...) this.searchSvc = this._searchService.DoGeneralSearch(search).subscribe( (data) => { this.searchSvc = data; } ); [field-pipe-component] : импорт и @труба и экспорт - person Marco Jr; 10.03.2016
comment
Я поместил ваш канал в другой файл сейчас ... теперь он выдает мне ИСКЛЮЧЕНИЕ: недопустимый аргумент «[object Object]» для канала «AsyncPipe» в [searchSvc | асинхронный | поле:комнаты в TypeaheadComponent@15:43] - person Marco Jr; 10.03.2016
comment
нвмд ! Я пересмотрел !! теперь работает!! получить еще один ответ от меня! Ты звезда, Тьерри! - person Marco Jr; 10.03.2016