Come posso mostrare solo i risultati in cui card.column valore corrisponde a column.id in angular2

Question

Ho il codice seguente e funziona bene, ciò che fa è ngPer ripetere per creare una colonna per ogni colonna nell'oggetto colonna.

Attualmente mostra ogni carta dall'oggetto delle carte in ogni colonna.

quello che voglio fare è presentarsi solo carte nella colonna in cui column.id = card.column

Come posso modificare il mio codice per fare questo?

import {Input, Output, EventEmitter, Component, Injectable} from 'angular2/core' 
    import {NgFor} from 'angular2/common' 
    import {Observable} from 'rxjs/Observable'; 

    interface Card { 
    id?: number; 
    title?: string; 
    column?: number; 
    } 

    @Injectable() 
    export class DataService { 
    cards$: Observable<Array<Card>>; 
    private _cardsObserver: any; 
    private _dataStore: Array<Card>; 

    constructor(){ 
     this._dataStore = [ 
     {id: 1, title: 'Card A', column: 1}, 
     {id: 2, title: 'Card B', column: 2}, 
     {id: 3, title: 'Card C', column: 2} 
     ]; 

     this.cards$ = new Observable(observer => 
     this._cardsObserver = observer).share(); 
    } 

    loadCards() { 
     this._cardsObserver.next(this._dataStore); 
    } 

    addCard(){ 
     this._dataStore.push({id: 4, title: 'Card D', column: 3}); 
     this._cardsObserver.next(this._dataStore); 
    } 

    getColumns(){ 

     var columns = [ 
     {id: 1, title: 'Column One'}, 
     {id: 2, title: 'Column Two'}, 
     {id: 3, title: 'Column Three'} 
     ]; 

     return columns; 

    } 

    } 


    @Component({ 
    selector: 'app', 
    providers: [DataService], 
    directives: [], 
    template: ` 
    <button (click)="dataService.addCard()">Add Card</button> 
    <div class="columns" *ngFor="#c of columns"> 
     {{c.title}} 
     <div class="card" *ngFor="#card of cards">{{card.title}}</div> 
    </div> 
    ` 
    }) 
    export class App { 

    private cards: Array<Card>; 
    private columns: any; 

    constructor(public dataService: DataService) { 
     dataService.cards$.subscribe(updatedCards => this.cards = updatedCards); 
     dataService.loadCards(); 
     this.columns = dataService.getColumns(); 

    } 
    } 

Answer 1

Come @Langley detto nel suo commento, vorrei creare un tubo personalizzato per questo:

import {Injectable, Pipe} from 'angular2/core'; 

@Pipe({ 
    name: 'filter' 
}) 
@Injectable() 
export class CardFilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
    return items.filter(item => item.column === args[0]); 
    } 
} 

e utilizzarlo così:

<div class="columns" *ngFor="#c of columns"> 
    {{c.title}} 
    <div class="card" *ngFor="#card of cards | filter:c">{{card.title}}</div> 
</div> 

Se si vuole prendere in aggiornamento dell'account, è necessario impostare l'attributo puro su falso:

@Pipe({ 
    name: 'filter', 
    pure: false 
}) 
@Injectable() 
export class CardFilterPipe implements PipeTransform { 
    (...) 
} 

Spero che ti aiuti, Thierry