ng-2 наследование родительско-дочерних данных было для меня проблемой.
Кажется, что это может быть прекрасным практическим решением, так это фильтрация моего общего массива данных в массив, состоящий только из дочерних данных, на которые ссылается единственный родительский идентификатор. Другими словами: наследование данных становится фильтрацией данных по одному родительскому идентификатору.
В конкретном примере это может выглядеть так: фильтрация массива книг для отображения только книг с определенным 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 для меня новичок, но я думаю, что близок к тому, чтобы здесь все заработало.
(Также можно было бы перезаписать исходный массив книг, а затем использовать *ngFor="#book of books"
.)
РЕДАКТИРОВАТЬ Подходя ближе, но все еще выдает ошибку.
//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
OnInit
и добавленияbooksByStoreID = Book[];
компонента.