Angular 5 CheckBox 过滤器数据

Question

我正在尝试通过复选框过滤我的数据

store-sidebar.component:

<ul class="list-unstyled scrollbar">

  <li *ngFor="let category of categories; let i = index">
      <label class="custom-control custom-checkbox">
          <input type="checkbox" name="category" id="checkbox{{ i +1 }}" value="{{category}}"
          (change)="check(category, $event)" class="custom-control-input">
          <small class="custom-control-indicator"></small>
          <small class="custom-control-label">{{ category }}</small>
      </label>
  </li>

</ul>

import { Component, OnInit,  Input, Output, EventEmitter } from '@angular/core';
import { Categories } from '../shared/services/categories';
import { Feeds } from '../shared/services/feeds';
import { CategoriesService } from '../shared/services/categories.service';
import { FeedsService } from '../shared/services/feeds.service';
@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit {

  categories: Categories[];

  feeds: Feeds[];

  myarray = [];

  myobj = {
    'categories': this.myarray
  };

  constructor(private categoriesService: CategoriesService, private feedsService: FeedsService) { }

  ngOnInit() {
    this.getCategories();
  }


  getCategories(): void {
    this.categoriesService.getCategories().subscribe(categories => this.categories = categories);
   }

  check(category, event) {
     if (event.target.checked) {
      this.myarray.push(category);
      this.feedsService.getFeedsfeedsByCategories([this.myobj]);
    } else if (!event.target.checked) {
      const index = this.myarray.indexOf(category);
      this.myarray.splice(index, 1);
      this.feedsService.getFeedsfeedsByCategories([this.myobj]);
    }
    console.log(this.myobj);
  }

}

store-feeds.component.html：

<div class="storetabContent" *ngFor="let feed of feeds">
<h3>{{ feed.feed_title }}</h3>
</div>

getFeeds(): void { this.feedsService.getFeeds().subscribe(feeds => this.feeds = feeds); }

我在这里对如何检查感到困惑，我的意思是它们位于不同的组件中，我应该如何管理状态。

我尝试过使用 Pipes 但不起作用

我正在尝试创建这样的复选框过滤器：

http://carlosroso.com/angular2-shop

https://plnkr.co/edit/EQR9DHZQY9e1ItRcKL5s?p=preview

Answer 1

有不同的方法来实现这一点。其中之一是通过服务。这些是我们的假设：

1. 侧边栏组件将仅保存过滤器的状态，并在任何复选框发生更改时向服务发出事件。事件负载将是一个过滤器对象。
2. 该服务将侦听过滤器对象中的更新，过滤数据并在data$ Observable 中发出数据。
3. Feed 组件将订阅 data$ observable 并相应地更新视图。

所以这被翻译成这样：

sidebar.component.ts

// Method called from the template when there's a change in a checkbox

onRedCheckboxChange(evt) {
  // your filterObject would look like this:
  // { blue: true, red: false, green: false }
  this.filterObject.red = evt.checked;
  this.myService.filterData(this.filterObject);
}

my-service.service.ts

import { Subject }  from 'rxjs/Subject';

private data: Item[] = [];

data$: Subject<Item[]> = new Subject();

filterData(filterObject) {
  const filteredData = this.data.filter(item => {
    // filter your data according to the filter object
  });
  this.data$.next(filteredData);
}

feed.component.ts

ngOnInit() {
  // subscribe to changes in data
  this.myService.data$.subscribe(data => this.feeds = data);
}

语法可能不正确，但我希望您了解如何通过带有过滤器有效负载的服务来通信两个组件。