Angular2 - 用於* ngFor的自定義管道按JSON值篩選結果

今天我正在嘗試瞭解自定義管道。我可以讓一切正常工作，直到我到達創建PipeTransform的參數的那一部分。無論我在網上閱讀什麼，我似乎都無法接受我離開的地方。Angular2 - 用於* ngFor的自定義管道按JSON值篩選結果

我希望有一個過濾器，我可以重新使用每張卡類型，簽證，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簽證事務和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>

來源

2016-12-30 Phil Jefferies

，我認爲你是把得多邏輯的模板。如果您將該邏輯放置在控制器所在的位置，它將更加優越且易於測試。

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

來源

2016-12-30 18:25:51

謝謝你的回覆，Leon。自從我學習以來，我一直在尋求理解如何通過使用自定義管道來實現解決方案。我覺得我很接近但錯過了最後一塊。我認爲你的.filter可能會把我帶到某個地方。 –

Angular2 - 用於* ngFor的自定義管道按JSON值篩選結果

回答

相關問題