Dziedziczenie danych rodzic-dziecko ng-2 było dla mnie trudnością.
Wydaje się, że może to być dobre, praktyczne rozwiązanie, polegające na filtrowaniu całej tablicy danych do tablicy składającej się tylko z danych potomnych, do których odwołuje się 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ć następująco: filtrowanie tablicy książek, aby wyświetlić tylko książki z pewnym 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, aby wszystko tu działało.
(Opcją może być również zastąpienie oryginalnej tablicy książek, a następnie użycie *ngFor="#book of books"
).
EDYCJA Coraz bliżej, ale nadal wyświetla 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
źródło
OnInit
i dodaniubooksByStoreID = Book[];
komponentu pojawia się błąd „Błąd: ngOnInit nie jest zdefiniowany” .booksByStoreID: Book[];
]
Możesz sprawdzić przykład w Plunkerze tutaj przykładowe filtry plunkera
źródło
Aby odfiltrować tablicę niezależnie od typu właściwości (tj. Dla wszystkich typów właściwości), możemy utworzyć niestandardowy potok filtru
Nie zapomnij zaimportować potoku do modułu aplikacji
Może być konieczne dostosowanie logiki, aby filtrować według dat.
źródło