Jak filtrować tablicę z TypeScript w Angular 2?

Question

Dziedziczenie danych rodzic-dziecko ng-2 było dla mnie trudnością.

To, co wydaje się być praktycznym, praktycznym rozwiązaniem, polega na filtrowaniu całej tablicy danych do tablicy składającej się tylko z danych podrzędnych przywoływanych przez pojedynczy identyfikator rodzica. Innymi słowy: dziedziczenie danych staje się filtrowaniem danych według jednego identyfikatora nadrzędnego.

W konkretnym przykładzie może to wyglądać tak: filtrowanie tablicy książek, tak aby wyświetlać tylko książki z pewną liczbą 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 jest dla mnie nowy, ale myślę, że jestem blisko tego, że wszystko działa.

(nadpisywanie także tablica oryginalne książki mogą być opcja, a następnie za pomocą *ngFor="#book of books").

EDIT coraz bliżej, ale wciąż daje błąd.

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

Trzeba umieścić swój kod do ngOnInit i użyć this kluczowe:

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

Musisz ngOnInit ponieważ wejście store nie byłyby ustawione w konstruktorze:

ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

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

W kodzie, książki filtrowania jest wprost zdefiniowane w treści klasy ...

Answer 2

Można sprawdzić przykład w Plunker tutaj plunker example filters

filter() { 

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