[解決済み] Angular 2のTypeScriptで配列にフィルタをかけるには？

質問

ng-2の親子データ継承に苦労しています。

実用的な解決策になりそうなのは、データの配列をフィルタリングして、1つの親IDから参照される子データのみからなる配列にすることです。 言い換えれば、データ継承は、1つの親IDによるデータフィルタリングになるのです。

具体的な例としては、books 配列をフィルタリングして、ある特定の 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" .)

EDIT 近づいてはいるが、まだエラーが出ている。

//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

解決方法は？

あなたのコードを 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 )

あなたのコードでは、booksのフィルタリングはクラスのコンテンツに直接定義されています...