Observable 角度2：观察数据子集中的变化

（我的问题涉及但涉及一次解析的数据，而我需要重复解析。）

我下载400个项目，并将其过滤为默认的20个。用户可以更改过滤器，从而更改显示给他们的20个结果。我应该使用服务来存储数据和应用过滤器，还是应该在父组件中处理这些？如果是前者（感觉更适合练习），我需要一些帮助来连接它。

我有以下服务定义，将下载数据：

@Injectable()
export class RestosSvc {
    http: Http;
    data: {
        restos : Array<Resto>;
        recommendations: Array<Resto>;
    };

    constructor(http:Http) {
        console.log('RestosSvc constructor');
        ...

然后，我需要找到一种方法，在数据下载后，以及由于所用过滤器的更改而导致数据随后发生更改时，获取

建议

刷新

问题:

• 过滤器

  应该直接与服务对话，还是由其自身与服务对话的父级提供事件处理程序
• 如何设置服务，以便在更新了

  建议后，将此信息提供给

在Angular 1代码中，我让过滤器将新的过滤器信息发送到服务，服务计算要显示的内容，然后$broadcast一个事件，以便组件可以刷新自己：

      this.data.recommendations = ...

      // this.$rootScope.$broadcast('recommendations');

而my home组件目前仅在引导时获得空建议（在下载

restos

并应用默认过滤器之前）

导出类HomeCmp{
建议：阵列；
构造函数（restos:RestosSvc）{
//ObservableWrapper.subscribe（
//restos.data.recommendations，
//recs=>this.recommendations=recs
// );
this.recommendations=restos.data.recommendations；
}
}

我不确定是否理解您的问题，但我猜答案是Angular 2有一个内置的observable-http将返回一个observable，而不是承诺！更多细节，请查看帖子。基本的想法是，你现在可以做这样的事情（参考摘自帖子）：

反应式编程是在Angular 2中构建的，所以您不必为了使用它而做一些特殊的事情

希望这能回答你的问题。如果没有，请补充一些解释

编辑：

作为对上一次编辑的回应，我想最好使用单向树数据流（类似于React的方法）。这意味着数据/状态应该是不可变的，不应该被不拥有它的组件更改

我认为数据应该来自父组件，在用户交互时，过滤器组件应该触发一个事件到父组件，该事件将通知子组件有关更改（这是通过

输入
数据，使用
[data]
语法）

我希望我正确理解了你的问题
 好的，所以我通过改编@EricMartinez plnkr解决了这个问题。基于his，但将更多的数据处理委托给服务

export class Hello {
  original: [];
  recommendations: [];

  constructor(public svc: RestosSvc) {
  }

  downloadData() {

    // Data coming from the server via service
    this.svc.http
      .subscribe((data) => {
        this.original = data;
        this.recommendations = this.original;
      });
  }

  handleFilterChange(count) {
    // Filter 
    console.log(count);
    this.recommendations = this.original.slice(0, count);
  }
}

像这样的东西是你想要的吗？@EricMartinez就最终结果而言是的，但是你已经将数据处理放在父组件中了，而且就我所见，该服务实际上没有被使用。实际上，我的应用程序并不复杂，所以我也许也可以这样做，但它感觉不到“最佳实践”，我认为我不应该这样做。我希望过滤器中的一个事件被传递到服务中，引发一系列建议，然后再传递给父组件，以提供给map和listI。我还惊讶于你让Angular2、TS和SystemJS看起来如此简单——我自己完成了这项工作，并开始使用种子，但你却在使用你不理解的代码。我可能会把你的框架作为我前进的基础！如果您可以提供一些简化的示例（我发现从当前的代码示例中很难理解），那么理解问题/问题就会容易得多。10倍！好的，我明天可能会去使用@EricMartinez的模板，因为我现在太累了。是的，我可以看到如何在加载时获取数据，但是如何处理导致对完整数据进行不同过滤的用户事件，这需要重新呈现data@SimonH：请看我最后一次编辑。希望它能回答你的一些问题。
export class HomeCmp {
  recommendations : Array<Resto>;

  constructor(restos: RestosSvc) {
    // ObservableWrapper.subscribe(  
    //   restos.data.recommendations, 
    //   recs => this.recommendations = recs
    // );
    this.recommendations = restos.data.recommendations;
  }
}

getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

export class Hello {
  original: [];
  recommendations: [];

  constructor(public svc: RestosSvc) {
  }

  downloadData() {

    // Data coming from the server via service
    this.svc.http
      .subscribe((data) => {
        this.original = data;
        this.recommendations = this.original;
      });
  }

  handleFilterChange(count) {
    // Filter 
    console.log(count);
    this.recommendations = this.original.slice(0, count);
  }
}