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

Question

我正在使用Semantic-UI的{​​{3}}组件和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中查看它，看看是否可以使用它。