A herança de dados pai-filho ng-2 tem sido uma dificuldade para mim.
O que parece ser uma solução prática de bom funcionamento é filtrar meu array total de dados em um array que consiste apenas em dados filho referenciados por um único id pai. Em outras palavras: a herança de dados torna-se a filtragem de dados por um id pai.
Em um exemplo concreto, isso pode ser parecido com: filtrar uma matriz de livros para mostrar apenas os livros com um certo 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 é novo para mim, mas acho que estou perto de fazer as coisas funcionarem aqui.
(Também pode ser uma opção substituir a matriz de livros original, em seguida, usar *ngFor="#book of books"
.)
EDIT Chegando mais perto, mas ainda dando erro.
//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
fonte
OnInit
e adicionarbooksByStoreID = Book[];
o componente.booksByStoreID: Book[];
]
Você pode verificar um exemplo no Plunker aqui plunker exemplos de filtros
fonte
Para filtrar uma matriz independentemente do tipo de propriedade (ou seja, para todos os tipos de propriedade), podemos criar um tubo de filtro personalizado
Não se esqueça de importar o tubo no módulo de app
Podemos precisar personalizar a lógica para arquivador com datas.
fonte