如何在Angular 2中使用TypeScript过滤数组？

Question

ng-2亲子数据继承对我来说一直是个难题.

看起来可能是一个很好的实用解决方案是将我的整个数据数组过滤到一个数组,该数组只包含由单个父ID引用的子数据.换句话说:数据继承成为一个父ID的数据过滤.

在一个具体的例子中,这可能看起来像:过滤书籍数组只显示具有特定的书籍store_id.

import {Component, Input} from 'angular2/core';

export class Store {
  id: number;
  name: string;
}

export class Book {
  id: number;
  shop_id: number;
  title: string;
}

@Component({
  selector: 'book',
  template:`
    <p>These books should have a label of the shop: {{shop.id}}:</p>

    <p *ngFor="#book of booksByShopID">{{book.title}}</p>
  `
])
export class BookComponent {
  @Input()
  store: Store;

  public books = BOOKS;

  // "Error: books is not defined"
  // ( also doesn't work when books.filter is called like: this.books.filter
  // "Error: Cannot read property 'filter' of undefined" )
  var booksByStoreID = books.filter(book => book.store_id === this.store.id)
}

var BOOKS: Book[] = [
  { 'id': 1, 'store_id': 1, 'name': 'Dichtertje' },
  { 'id': 2, 'store_id': 1, 'name': 'De uitvreter' },
  { 'id': 3, 'store_id': 2, 'name': 'Titaantjes' }
];

TypeScript对我来说是新手,但我认为我很接近在这里开展工作.

(也可以选择覆盖原始书籍阵列,然后使用*ngFor="#book of books".)

编辑 越来越近,但仍然出错.

//changes on top:
import {Component, Input, OnInit} from 'angular2/core';

// ..omitted

//changed component:
export class BookComponent implements OnInit {
  @Input() 
  store: Store;

  public books = BOOKS;

  // adding the data in a constructor needed for ngInit
  // "EXCEPTION: No provider for Array!"
  constructor(
    booksByStoreID: Book[];
  ) {}


  ngOnInit() {
    this.booksByStoreID = this.books.filter(
      book => book.store_id === this.store.id);
  }
}

// ..omitted

Answer 1

您需要将代码放入ngOnInit并使用this关键字:

ngOnInit() {
  this.booksByStoreID = this.books.filter(
          book => book.store_id === this.store.id);
}

您需要ngOnInit因为输入store不会被设置到构造函数中:

在第一次检查指令的数据绑定属性之后,以及在检查其任何子项之前,立即调用ngOnInit.实例化指令时仅调用一次.

(https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html)

在您的代码中,书籍过滤直接定义到类内容中......

Answer 2

您可以在此处查看Plunker示例中的plunker示例过滤器

filter() {

    let storeId = 1;
    this.bookFilteredList = this.bookList
                                .filter((book: Book) => book.storeId === storeId);
    this.bookList = this.bookFilteredList; 
}