使用异步源搜索（Angular2 承诺）

Question

我正在使用Semantic-UI 的Search 组件和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

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) 使用 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()
    );
  }

}

希望这会有所帮助。

Answer 2

现在，您正在使用初始值（一个空数组）初始化搜索，因为运行 ngOnInit 时数据尚未到达。

对于这种特殊情况，最简单的解决方案是在初始化搜索组件之前等待您的数据到达：

export class FooComponent implement OnInit {
    ...

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

请记住，Semantic UI 的搜索组件有一个内置的机制来保持远程搜索结果 - 您可能需要在 usage section of the docs 中查看它，看看您是否可以使用它。