angular - Angular2中的多个过滤条件

Question

注意:我是软件开发的新手，这些年来一直是功能顾问(非技术)。

我有一个使用 *ngFor 显示的数组列表，如下所示:

<li *ngFor="let borrower of borrowers">
    <p>{{borrower.name}},{{borrower.amount}},{{borrower.rate}},{{borrower.tenure}},{{borrower.city}}<p>
</li>

名称是字符串。金额是可以取 25000 到 100000 之间的任何值的数字。费率是可以在 12% 到 20% 之间的数字。 Tenure 是可以取 6 或 12 值的数字。City 是字符串。

我想根据以下某些过滤条件过滤上述数组:

<form>
    <input type="text" name="city" placeholder="Enter City" style="width: 100%">
    <div class="amtcheckbox"><input type="checkbox" name="25kto50k">25000 - 50000</div>
    <div class="amtcheckbox"><input type="checkbox" name="50kto100k">50001 - 100000</div>
    <div class="ratecheckbox"><input type="checkbox" name="12to15">12% - 15%</div>
    <div class="ratecheckbox"><input type="checkbox" name="16to20">16% - 20%</div>
    <div class="tenurecheckbox"><input type="checkbox" name="6months">6 Months</div>
    <div class="tenurecheckbox"><input type="checkbox" name="12months">12 Months</div>
</form>

如果应用过滤器，将至少具有一个或多个条件。

这是我的第一个问题。如果我遗漏了什么，请告诉我，我会改进下一个问题。

Answer 1

您可以使用 pipe 实现此目的在你的 *ngFor 上。管道需要将每个复选框值作为一系列参数。然后您将使用这些参数根据您的标准减少结果集。这是一个plunkr如果您需要更多详细信息。将管道添加到 *ngFor 的语法如下所示

*ngFor="let people of peopleCollection | customFilterPipe:hasFeetChckbx:hasScooterChckbx:hasBikeChckbx:hasCarChckbx"

每个“:”分隔进入管道的每个参数。管道转换方法签名将如下所示

transform(_initialCollection: People[], _hasFeet: boolean, _hasScooter:boolean, _hasBike:boolean, _hasCar:boolean)

_initialCollection 是*ngFor 集合中的数据，之后的所有参数都是从*ngFor 中的每个":"传递过来的。