Yalnızca card.column değerinin angular2

Question

'daki column.id ile eşleştiği sonuçları nasıl gösterebilirim? Aşağıdaki kodum var ve iyi çalışıyor, ngFor sütun nesnesindeki her sütun için bir sütun oluşturmak için yineleniyor.

Şu anda, her sütunda bulunan kartlar nesnesindeki her kartı gösterir. ben yapmak istiyorum ne

Bunu nasıl yapmak benim kodunda değişiklik yapabilirsiniz column.id =

card.column sütunda göstermek sadece kartları nedir?

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]); 
    } 
} 

Ve bu gibi kullanabilirsiniz: @Langley gibi

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

Bunun için özel bir boru yaratacak, onun yorumunda söyledi

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

içine almak istiyorsanız hesap güncelleştirmesi, salt özniteliği false olarak ayarlamanız gerekir:

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

Size yardımcı olur umarım, Thierry