Question

我有以下代码，它工作正常，它的作用是ng为重复为列对象中的每一列创建一列。

目前它显示每列中卡片对象的每张卡片。

我想要它只显示列WHERE列中的卡片.id = card.column

如何修改我的代码才能执行此操作？

  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

就像@Langley在评论中所说，我会为此创建一个自定义管道：

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

并使用它：

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

如果要考虑更新，则需要将pure属性设置为false：

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

希望它可以帮到你，亨利

如何只显示card.column值与angular2中的column.id匹配的结果？

1 个答案: