Comment pour filtrer un tableau avec les caractères dactylographiés dans 2 angulaire ?

Question

ng-2 parent-enfant d'héritage des données a été une difficulté pour moi.

Ce qui semble qui pourrait être un beau travail pratique est la solution de filtrage de mon tableau de données d'un tableau constitué de l'enfant unique de données référencé par un seul parent de l'id. En d'autres termes: données de l'héritage devient le filtrage des données par un parent de l'id.

Dans un exemple concret de ce qui peut ressembler à: filtrage d'un des livres de tableau pour afficher uniquement 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' }
];

Tapuscrit est nouveau pour moi, mais je pense que je suis sur le point de prendre les choses fonctionnent ici.

(Également écraser les livres originaux tableau pourrait être une option, puis à l'aide de *ngFor="#book of books".)

MODIFIER Se rapprocher, mais en donnant toujours 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

Answer 1

Vous avez besoin de mettre votre code en ngOnInit et l'utilisation de l' this mot-clé:

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

Vous avez besoin d' ngOnInit , car l'entrée store ne serait pas définie dans le constructeur:

ngOnInit est appelée juste après la directive est liée à des données de propriétés ont été vérifiés pour la première fois, et avant tout de ses enfants ont été vérifiées. Il est invoqué qu'une seule fois lorsque la directive est instancié.

(https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html)

Dans votre code, les livres de filtrage est directement défini dans le contenu de la classe...

Answer 2

Vous pouvez consulter un exemple de Plunker sur ici plunker exemple montre comment filtrer

Answer 3

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 une filtre personnalisé pipe

N’oubliez pas d’importer le tuyau dans le module app

Il faudra personnaliser la logique à filer avec les dates.