ng-2 parent-child data inheritance has been a difficulty for me.

What seems that could be a fine working practical solution is filtering my total array of data to an array consisting of only child data referenced by a single parent id. In other words: data-inheritance becomes data filtering by one parent id.

In a concrete example this can look like: filtering a books array to only show the books with a 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 is new to me, but I think I am close to making things work here.

(Also overwriting the original books array could be an option, then using *ngFor="#book of books".)

EDITGetting closer, but still giving an 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

3 Answers

You need to put your code into ngOnInit and use the this keyword:

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

You need ngOnInit because the input store wouldn't be set into the constructor:

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.

()

In your code, the books filtering is directly defined into the class content...

14

You can check an example in Plunker over here plunker example filters

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

To filter an array irrespective of the property type (i.e. for all property types), we can create a custom filter pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: "filter" })
export class ManualFilterPipe implements PipeTransform { transform(itemList: any, searchKeyword: string) { if (!itemList) return []; if (!searchKeyword) return itemList; let filteredList = []; if (itemList.length > 0) { searchKeyword = searchKeyword.toLowerCase(); itemList.forEach(item => { //Object.values(item) => gives the list of all the property values of the 'item' object let propValueList = Object.values(item); for(let i=0;i<propValueList.length;i++) { if (propValueList[i]) { if (propValueList[i].toString().toLowerCase().indexOf(searchKeyword) > -1) { filteredList.push(item); break; } } } }); } return filteredList; }
}
//Usage
//<tr *ngFor="let company of companyList | filter: searchKeyword"></tr>

Don't forget to import the pipe in the app module

We might need to customize the logic to filer with dates.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy