L'héritage des données parent-enfant ng-2 a été une difficulté pour moi.
Ce qui semble être une solution pratique et efficace consiste à filtrer mon tableau total de données sur un tableau composé uniquement de données enfants référencées par un identifiant parent unique. En d'autres termes: l'héritage des données devient le filtrage des données par un identifiant parent.
Dans un exemple concret, cela peut ressembler à: filtrer un tableau de livres pour n'afficher que les livres avec un certain 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 est nouveau pour moi, mais je pense que je suis sur le point de faire fonctionner les choses ici.
(Également écraser le tableau des livres d'origine pourrait être une option, puis utiliser *ngFor="#book of books"
.)
EDIT Se rapprocher, mais toujours donner une erreur.
//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
la source
OnInit
et ajoutébooksByStoreID = Book[];
le composant.booksByStoreID: Book[];
]
Vous pouvez consulter un exemple dans Plunker ici les filtres d'exemple de plunker
la source
Pour filtrer un tableau quel que soit le type de propriété (c'est-à-dire pour tous les types de propriété), nous pouvons créer un tube de filtre personnalisé
N'oubliez pas d'importer le tube dans le module de l'application
Il se peut que nous devions personnaliser la logique du déposant avec des dates.
la source