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

您可以在您的 *ngFor 上使用 pipe 来实现此目的。管道需要将每个复选框值作为一系列参数。然后，您将使用这些参数根据您的标准减少结果集。如果您需要更多详细信息，这里是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 传递过来的。