Angular2 - Custom Pipe for * ngFor для фильтрации результатов по JSON Значение

Question

Сегодня я пытаюсь узнать о пользовательских трубках. Я могу заставить все работать нормально, пока не дойду до той части, где я создаю аргументы для PipeTransform. Независимо от того, что я читаю в Интернете, я, похоже, не понимаю, где я.

View Plunker Example

Я надеялся иметь фильтр я мог бы повторно использовать для каждого типа карты, Visa, MC, AMEX и т.д., и вызывать его из переменной в трубе.

*ngFor="let transaction of ('./app/api/transactions.json' | fetch | cardType:['Visa'])" 

Моя проблема здесь, в файле cardtype.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'cardType' }) 

export class CardTypePipe implements PipeTransform { 
    transform(value: string, args: string[]): any { 

     // I can't figure out the args here... 

    } 
} 

Вот выборочные данные, которые показывает 2 Visa операции и 1 MC. Моя цель - показывать только типы карт VISA в таблице. Я звоню файл в формате JSON для данных:

[ 
     { 
     "cardType": "Visa", 
     "amount": 153.42 
     }, 
     { 
     "cardType": "MasterCard", 
     "amount": 296.11 
     }, 
     { 
     "cardType": "Visa", 
     "amount": 74.57 
     } 
] 

Моя таблица:

<table class="table table-hover table-striped"> 
    <thead> 
     <tr> 
      <th>Card Type</th> 
      <th class="text-xs-right">Amount</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let transaction of ('./app/api/transactions.json' | fetch | cardType:['Visa'])"> 
      <td>{{ transaction.cardType }}</td> 
      <td class="text-xs-right">{{ transaction.amount | currency:'USD':true }}</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Я думаю, что вы ставите на много логики в шаблоне. Это намного лучше и легко проверить, если вы поместите эту логику в контроллер, где она принадлежит.

interface Transaction { 
    cardType: 'Visa' | 'MasterCard'; 
    amount: number; 
} 

@Component({ 
    // you know the stuff... 
}) 
class TransactionView { 

    transactions: Observable<Transaction[]>; 

    ngOnInit() { 
    this.http.get('./app/api/transactions.json') 
     .map(r => r.json()) 
     .filter(transaction => transaction.cardType === 'Visa') 
     .subscribe(transactions => this.transactions = transactions); 
    } 
}