Question

（我的问题与this one有关，但是它涉及解决一次的数据，而我需要重复解决。）

我下载了400个项目，并将其过滤为默认值20.用户可以更改过滤器，从而显示20个结果。我应该使用服务来存储数据并应用过滤器，还是应该只在父组件中处理？如果是前者（感觉更好的做法），我需要一些帮助来接线。

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

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

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

简而言之，restos在引导时成为来自服务器的400强列表，recommendations是少数几个。然后，根据用户输入，建议的选择会发生变化。

我的计划是使用此html（组件home，由顶级app调用）

<h1>Home</h1>
<filters></filters>

<map [recommendations]="recommendations"></map>

<list [recommendations]="recommendations"></list>

然后我需要找到一种方法，以便在下载数据后刷新recommendations，然后由于所用过滤器的更改而随后更改。

问题：

应该Filters直接与服务对话，还是由其父母自己与服务部门联系提供事件处理程序？
如何设置服务，以便在更新recommendations后，提供此信息。

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

      this.data.recommendations = ...

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

我的主组件目前只在引导时获取空推荐（在restos下载并应用默认过滤器之前）

export class HomeCmp {
  recommendations : Array<Resto>;

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

Answer 1

我不确定我理解你的问题，但我想答案是Angular 2有一个可观察的构建 - http将返回一个可观察的，而不是一个承诺！有关详细信息，请查看this帖子。基本的想法是你现在可以做这样的事情（参考文章）：

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')
    );
}

反向编程是在Angular 2中构建的，所以你不必为了使用它而特别需要...

希望这能回答你的问题。如果没有，请添加更多解释。

修改：

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

我认为数据应该来自父组件，并且在用户交互时，过滤器组件应该触发父组件的事件，这将通知子组件有关更改（这是Input数据，使用[data]语法）。

我希望我能正确理解你的问题！

Answer 2

好的，所以我通过改编@EricMartinez plnkr解决了这个问题。 This one基于他，但代表对服务进行了更多的数据处理。

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);
  }
}

Angular2：观察数据子集的变化

2 个答案: