Я использую компонент поиска 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 всегда пусто. Я думаю, это происходит из-за асинхронного вызова службы передачи данных.

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

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

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) Использование подписки Angular 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()
    );
  }

}
  

Надеюсь, это поможет.

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

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

 export class FooComponent implement OnInit {
    ...

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

Имейте в виду, что компонент поиска Semantic UI имеет встроенный механизм для удаленного хранения результатов поиска — возможно, вы захотите проверить его в разделе использование документации, чтобы узнать, можете ли вы использовать его вместо этого.