поиск с async источником (Angular2 обещание)

Question

Я использую Search компонент Semantic-UI и Angular2 обещание. Вот мой код:

foo.component.ts:

export class FooComponent implement OnInit { 
    myData:any = []; 
    ... 

    ngOnInit() { 
     this.myDataService.getData().then(myData => this.myData = myData); 
     $('.ui.search').search({ source: this.myData }); 
    } 
} 

foo.component.html:

<div class="ui search"> 
    <input class="prompt" type="text"> 
    <div class="results"></div> 
</div> 

Но source всегда пусто. Я думаю, что это происходит из-за асинхронного вызова службы данных.

Вы знаете, как я могу это решить?

Answer 1

Прямо сейчас вы инициализируете поиск начальным значением (пустым массивом), так как данные еще не наступили при запуске ngOnInit.

Самое простое решение для этого конкретного случая, чтобы просто ждать, пока ваши данные прибыть до инициализации компонента поиска:

export class FooComponent implement OnInit { 
    ... 

    ngOnInit() { 
     this.myDataService.getData().then(myData => { 
      $('.ui.search').search({ source: myData }); 
     }); 
    } 
} 

Имейте в виду, что компонент поиска Semantic UI имеет встроенный механизм для поддержания поиска результаты удалены - вы можете проверить это в usage section of the docs, чтобы убедиться, что вы можете использовать это вместо этого.

Answer 2

Ответ от fstanis является технически корректным. Но у меня есть небольшое дополнение к тому, что он пропустил. OP сохранял результаты в свойстве на уровне компонентов, а не напрямую используя возвращаемый результат, может быть использован для последующего использования. Я также добавляю к этому ответу еще один возможный способ достижения этого.

1) Путь OP пытается сделать это

export class FooComponent implement OnInit { 
    myData:any = []; 
    ... 

    ngOnInit() { 
     this.myDataService.getData().then(myData => { 
      this.myData = myData; 
      $('.ui.search').search({ source: this.myData }); 
     }); 
    } 
} 

2) Использование Угловая 2 Подписаться

export class FooComponent implement OnInit { 
    myData:any = []; 
    ... 

    ngOnInit() { 
     this.myDataService.getData().subscribe(
      data => { 
       this.myData = data; 
       $('.ui.search').search({ source: this.myData }); 
      }, 
      error => { 
       // Write your logic here if an error was occurred. Use the variable "error" which has info about what happened. 
      }, 
      () => { 
       // This fires when the call has been finished. Just like .complete in jQuery.get or jQuery.post. So that you can do necessary operations after everything is completed. 
      } 
     ); 
    } 
} 

Это как ваша служба должна выглядеть

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class MyDataService { 

    constructor(private http:Http) { } 

    getData(){ 
    return this.http.get('some/api/url').map(
     res => res.json() 
    ); 
    } 

} 

Надежда это помогает.