如何使用 Angular 2 在下拉列表中仅显示唯一值 [英] How to display only unique values in the dropdown using Angular 2
问题描述
我有一个 JSON 数据,我使用 *ngFor 将其中的accountNumber"显示到下拉列表中.由于 JSON 数据中有多个条目具有相同的帐号,因此我在下拉列表中多次看到相同的帐号.在此处输入图片描述
html:
<div class="btn btn-default dropdown-toggle" type="button"id="dropdownMenu" data-toggle="dropdown" aria-expanded="true"><span>选择</span><span class="caret"></span><ul class="select-menu" aria-labelledby="dropdownMenu"><li *ngFor="#account of accounts">{{account.accountNumber}}</li>
json:
<代码>`[{帐号":7890,"交易日期": "4/2/2016","postingDate": "4/3/2016","description": "Pok Pok Thai","category": "餐厅",金额":15.00},{帐号":7890,"交易日期": "4/3/2016","postingDate": "4/4/2016","description": "博学海","category": "酒店",金额":25.00},{帐号":8901,"交易日期": "4/6/2016","postingDate": "4/7/2016","description": "Pok Pok Fai","category": "乳制品",金额":55.00},{帐号":8901,"交易日期": "4/7/2016","postingDate": "4/8/2016","description": "Pok Pok Aai","category": "汽车",金额":65.00},{帐号":4567,"交易日期": "4/9/2016","postingDate": "4/10/2016","description": "Pok Pok Cai","category": "医疗保健",金额":85.00},{帐号":4567,"交易日期": "4/10/2016","postingDate": "4/11/2016","description": "Pok Pok Dai","category": "医疗保健",金额":95.00},{帐号":8901,"交易日期": "4/12/2016","postingDate": "4/13/2016","description": "坐下","类别": "软件",金额":115.00}]`
如何避免在下拉列表中显示帐号的重复值?我假设它需要自定义管道,但不知道该怎么做.
我是 Angular 2 的新手并尝试寻找解决方案,但找不到任何适合我的需求.
已经有关于管道的基本解释和示例:如何将过滤器应用于 *ngFor
查看适用于您的案例的工作 plunker http://plnkr.co/edit/E7HlWeNJV2N3zwPfI51Q?p=preview .. 我用过 lodash 库和它的 uniqBy
函数,那么管道真的很简单:
声明 var _: any;//lodash,非严格类型@管道({name: 'uniqFilter',纯:假})@Injectable()导出类 UniquePipe 实现 PipeTransform {变换(项目:任何[],参数:任何[]):任何{//lodash uniqBy 函数返回 _.uniqBy(items, args);}}
.. 以及在你的组件中的用法:
<ul><li *ngFor="let account of accounts | uniqFilter: 'accountNumber'">{{ account.accountNumber }}</li>
编辑:我已将 plunker 更新到最新的 Angular 版本,并向管道添加了过滤参数.
I have a JSON data from which I am displaying 'accountNumber' into a dropdown using *ngFor. Since there are multiple entries in JSON data with the same account number, I am seeing the same account number multiple times in the dropdown. enter image description here
html:
<div class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu" data-toggle="dropdown" aria-expanded="true">
<span>Select</span>
<span class="caret"></span>
<ul class="select-menu" aria-labelledby="dropdownMenu">
<li *ngFor="#account of accounts">{{account.accountNumber}}</li>
</ul>
</div>
json:
`[
{
"accountNumber": 7890,
"transactionDate": "4/2/2016",
"postingDate": "4/3/2016",
"description": "Pok Pok Thai",
"category": "Restaurants",
"amount": 15.00
},
{
"accountNumber": 7890,
"transactionDate": "4/3/2016",
"postingDate": "4/4/2016",
"description": "Pok Pok Hai",
"category": "Hotel",
"amount": 25.00
},
{
"accountNumber": 8901,
"transactionDate": "4/6/2016",
"postingDate": "4/7/2016",
"description": "Pok Pok Fai",
"category": "Dairy",
"amount": 55.00
},
{
"accountNumber": 8901,
"transactionDate": "4/7/2016",
"postingDate": "4/8/2016",
"description": "Pok Pok Aai",
"category": "Automotive",
"amount": 65.00
},
{
"accountNumber": 4567,
"transactionDate": "4/9/2016",
"postingDate": "4/10/2016",
"description": "Pok Pok Cai",
"category": "Healthcare",
"amount": 85.00
},
{
"accountNumber": 4567,
"transactionDate": "4/10/2016",
"postingDate": "4/11/2016",
"description": "Pok Pok Dai",
"category": "Healthcare",
"amount": 95.00
},
{
"accountNumber": 8901,
"transactionDate": "4/12/2016",
"postingDate": "4/13/2016",
"description": "sit amet",
"category": "Software",
"amount": 115.00
}
]`
How can I avoid displaying duplicate values of the account number in the dropdown?I am assuming it will require a custom pipe but not sure how to do that.
I am new to Angular 2 and tried looking for the solution but couldn't find anything that suits my need.
There is already post explaing basic of pipes with examples: How to apply filters to *ngFor
See the working plunker for your case http://plnkr.co/edit/E7HlWeNJV2N3zwPfI51Q?p=preview .. I have used lodash library and its uniqBy
function, then the pipe is really that simple:
declare var _: any; // lodash, not strictly typed
@Pipe({
name: 'uniqFilter',
pure: false
})
@Injectable()
export class UniquePipe implements PipeTransform {
transform(items: any[], args: any[]): any {
// lodash uniqBy function
return _.uniqBy(items, args);
}
}
.. and the usage in your component:
<div>
<ul>
<li *ngFor="let account of accounts | uniqFilter: 'accountNumber'">{{ account.accountNumber }}</li>
</ul>
</div>
EDIT: I've updated the plunker to latest Angular version, and added filtering parameter to the pipe.
这篇关于如何使用 Angular 2 在下拉列表中仅显示唯一值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!