La herencia de datos de padres e hijos de ng-2 ha sido una dificultad para mí.
Lo que parece que podría ser una buena solución práctica de trabajo es filtrar mi matriz total de datos a una matriz que consta de solo datos secundarios a los que hace referencia una única identificación de padre. En otras palabras: la herencia de datos se convierte en filtrado de datos por una identificación principal.
En un ejemplo concreto, esto puede verse así: filtrar una matriz de libros para mostrar solo los libros con un determinado 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 es nuevo para mí, pero creo que estoy cerca de hacer que las cosas funcionen aquí.
(También puede ser una opción sobrescribir la matriz de libros original y luego usarla *ngFor="#book of books"
).
EDITAR Acercándonos, pero aún dando un error.
//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
fuente
OnInit
y agregarbooksByStoreID = Book[];
el componente.booksByStoreID: Book[];
]
Puede comprobar un ejemplo en Plunker aquí filtros de ejemplo de plunker
fuente
Para filtrar una matriz independientemente del tipo de propiedad (es decir, para todos los tipos de propiedad), podemos crear una tubería de filtro personalizada
No olvide importar la tubería en el módulo de la aplicación.
Es posible que necesitemos personalizar la lógica para declarar con fechas.
fuente