Question

今天我试图了解自定义管道。我可以让一切工作正常，直到我到达为PipeTransform创建args的部分。不管我在网上看到什么，我似乎无法回到我离开的地方。

我希望有一个过滤器，我可以为每种卡类型，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);
  }
}

Angular2 - 用于* ngFor的自定义管道，用于按JSON值过滤结果

1 个答案: