Question

注意：我是软件开发的新手，这些年来一直是功能顾问（非技术人员）。

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

＆＃13;

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

＆＃13;

名称是字符串。金额是可以取25000到100000之间的任何值的数字。费率是12％到20％之间的数字。任期是可以取值为6或12的数字。城市是字符串。

我想基于某些过滤条件过滤上述数组，如下所示：

＆＃13;

<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>

＆＃13;

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

这是我的第一个问题。如果我遗漏了某些内容，请告诉我，以后会改进。

Answer 1

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

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

每个“：”分隔每个arg进入管道。管道转换方法签名将如下所示

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

_initialCollection是来自* ngFor集合的数据，之后的所有参数都是从每个“：”中的* ngFor传递的。

Angular2

1 个答案: