![my my](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何在 angular 2 中进行全局搜索?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 angular2 的新开发人员,我想在 json 对象数组中进行全局搜索.例如,这个数组:
invoiceList =[{发票编号:1234,发票供应商:测试",发票状态:导入错误",发票类别:带 GR 的发票",日期:22/01/2017",数量:134527},...];
我想这样搜索:
这里的问题和困难在于:
- 我只想根据某些值(例如:状态、供应商名称、编号...)进行搜索并显示其他字段(如日期、净金额等).
- 我想根据某些值(例如:数量、供应商、日期和金额)按最终结果排序.我不知道如何在 angular2 中做到这一点.
- 最后,我想在 angular2 中做一个等效的"ng-show?我的意思是我只想在我们按下搜索按钮时显示表格,如果我们点击取消,它将删除它.
我知道在 angular 1 中做到这一点很简单,我们可以使用过滤器、'orderBy' 和类似的东西,但显然在 angular2 中,我们不能这样做,我非常困惑.你能帮我解决吗?
这是我的组件代码:
import { Component, OnInit } from '@angular/core';@成分({选择器:应用搜索",templateUrl: './search.component.html'})导出类 SearchComponent 实现 OnInit {invoiceList = [{invoiceNumber: 1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527},{invoiceNumber: 15672, invoiceSupplier : "test11", invoiceStatus: "Import error", invoiceCategory: "invoice without PO", date : "02/01/2017", amount : 134.3},{invoiceNumber: 99863, invoiceSupplier : "test22", invoiceStatus: "Other Document", invoiceCategory: "invoice with GR", date : "10/12/2016", amount : 189},{invoiceNumber: 24561, invoiceSupplier : "test50", invoiceStatus: "Other Document", invoiceCategory: "invoice without PO", date : "15/01/2017", amount : -134527},];构造函数(){}ngOnInit() {}}
和我的 html 代码:
<表格><tr><td>发票编号:</td><td><input name="invoiceNumber"></td><td>发票供应商名称:</td><td><input name="invoiceSupplier"></td></tr><tr><td>发票状态:</td><td><select name="invoiceStatus"><选项></选项><选项>导入错误</option><选项>需要发票控制</option><option>被SAP拒绝</option><option>其他文件</option><选项>在 SAP 中手动创建的发票<option>集成到SAP中</option><选项>集成在 SAP </option><选项>在 SAP 中预订</option><option>在 SAP 中支付</option></选择></td><td>发票类别:</td><td><select name="invoiceCategory"><选项></选项><option>带有 GR 的发票</option><option>不带GR的发票</option><option>不带PO的发票</option></选择></td></tr><tr><td>顺序:</td><td><选项>号码 </option><选项>供应商</option><选项>日期</option><选项>净额</option></选择></td></tr><tr><td><button type="submit">搜索</button></td><td><div class="详细信息"><button type="reset">取消</button>
</td></tr></表单>
我知道到目前为止我什么都没做,但我对 angular2 真的很陌生,我真的很困惑.你能帮我至少在组件部分吗???
先谢谢你!
解决方案
DONE !! - 见@PLUNKER
@Component({选择器:应用搜索",templateUrl: 'src/search.component.html'})导出类 SearchComponent{发票清单 = [{invoiceNumber: 1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527},{invoiceNumber: 15672, invoiceSupplier : "test11", invoiceStatus: "Import error", invoiceCategory: "invoice without PO", date : "02/01/2017", amount : 134.3},{invoiceNumber: 99863, invoiceSupplier : "test22", invoiceStatus: "Other Document", invoiceCategory: "invoice with GR", date : "10/12/2016", amount : 189},{invoiceNumber: 24561, invoiceSupplier : "test50", invoiceStatus: "Other Document", invoiceCategory: "invoice without PO", date : "15/01/2017", amount : -134527},];发票猫 = [];发票状态 = [];发票编号 = [];invoiceFields = Object.keys(this.invoiceList[0]);发票状态 = "";发票类别 = "";发票编号;发票供应商;order = this.invoiceFields[0];搜索结果 = [];构造函数(){this.invoiceList.forEach(i => {if(this.invoiceCats.indexOf(i.invoiceCategory) === -1) {this.invoiceCats.push(i.invoiceCategory);}if(this.invoiceStatuses.indexOf(i.invoiceStatus) === -1) {this.invoiceStatuses.push(i.invoiceStatus);}this.invoiceNumbers.push(i.invoiceNumber);})}ngOnInit() {}立即搜索(e){e.preventDefault();this.searchResults = this.invoiceList.filter(i => {返回 (this.invoiceStatus ? i.invoiceStatus === this.invoiceStatus : true)&&(this.invoiceNumber ? i.invoiceNumber === this.invoiceNumber : true)&&(this.invoiceSupplier ? i.invoiceSupplier === this.invoiceSupplier : true)&&(this.invoiceCategory ? i.invoiceCategory === this.invoiceCategory : true)}).sort((a, b) => {if(['invoiceNumber', 'amount'].indexOf(this.order) > -1) return a[this.order] - b[this.order];if(['invoiceSupplier', 'invoiceStatus', 'invoiceCategory'].indexOf(this.order) > -1) return (a[this.order] == [a[this.order], b[this.order]]].sort()[1] ? 1 : -1);if(this.order === '日期') {const x = new Date(a.date.split('/').reverse().join('/'));const y = new Date(b.date.split('/').reverse().join('/'));返回 x.getTime() - y.getTime();}})}}
注意:构造函数里面的代码只是为了生成元数据.
<表格><tr><td>发票编号:</td><td><input name="invoiceNumber" [(ngModel)]="invoiceNumber" type="number"></td><td>发票供应商名称:</td><td><input name="invoiceSupplier" [(ngModel)]="invoiceSupplier" type="text"></td></tr><tr><td>发票状态:</td><td><select name="invoiceStatus" [(ngModel)]="invoiceStatus"><option value="">Any</option><option *ngFor="let iS of invoiceStatuses" [value]="iS">{{iS}}</option></选择></td><td>发票类别:</td><td><select name="invoiceCategory" [(ngModel)]="invoiceCategory"><option value="">Any</option><option *ngFor="let iC of invoiceCats" [value]="iC">{{iC}}</option></选择></td></tr><tr><td>订购方式:</td><td><select name="order" [(ngModel)]="order"><option *ngFor="let iF of invoiceFields" [value]="iF">{{iF}}</option></选择></td></tr><tr><td><button type="submit">搜索</button></td><td><div class="详细信息"><button type="reset">取消</button>
</td></tr></表单><div><ul><li *ngFor="let i of searchResults">编号:{{i.invoiceNumber}},供应商:{{i.invoiceSupplier}},日期:{{i.date}}</li>
注意:在 Angular2
中有很多甚至数百种使用表单的方法,您可以使用任何您喜欢的方法,我只使用了最简单的一种.
I'm a new developper in angular2 and I want to do a global search in an array of json objects. For example, this array :
invoiceList =
[
{
invoiceNumber: 1234,
invoiceSupplier: "test",
invoiceStatus: "Import error",
invoiceCategory: "invoice with GR",
date: "22/01/2017",
amount : 134527
},
...
];
And I want to do my search like that :
The problem and the difficulty here is that :
- I want to search depending only on some values (ex : status, supplier name, number...) and display OTHER fields (like date, net amount etc..).
- I want to order by the final results depending on some values (ex: number, supplier, date and amount). And I don't how to do that in angular2.
- Finally, I want to do an "equivalent" of ng-show in angular2? I mean that I want to display the table only if we press search button, and if we click on cancel, it will remove it.
I know that it was simple to do that in angular 1, we can use filters, 'orderBy' and things like that but apparently in angular2, we can't do that and I got very very confused. Can you help me to solve that please???
here is my component code :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit {
invoiceList = [{invoiceNumber: 1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527},
{invoiceNumber: 15672, invoiceSupplier : "test11", invoiceStatus : "Import error", invoiceCategory: "invoice without PO", date : "02/01/2017", amount : 134.3},
{invoiceNumber: 99863, invoiceSupplier : "test22", invoiceStatus : "Other Document", invoiceCategory: "invoice with GR", date : "10/12/2016", amount : 189},
{invoiceNumber: 24561, invoiceSupplier : "test50", invoiceStatus : "Other Document", invoiceCategory: "invoice without PO", date : "15/01/2017", amount : -134527},
];
constructor() { }
ngOnInit() {
}
}
and my html code :
<form>
<table>
<tr>
<td>Invoice Number :</td>
<td>
<input name="invoiceNumber">
</td>
<td>Invoice Supplier Name :</td>
<td>
<input name="invoiceSupplier">
</td>
</tr>
<tr>
<td>Invoice Status :</td>
<td>
<select name="invoiceStatus">
<option></option>
<option> Import error </option>
<option> Invoice control required </option>
<option>Rejected from SAP </option>
<option>Other Document </option>
<option> Invoice created manually in SAP </option>
<option>To be integrated in SAP </option>
<option> Integrated in SAP </option>
<option> Booked in SAP </option>
<option>Paid in SAP</option>
</select>
</td>
<td>Invoice Category :</td>
<td>
<select name="invoiceCategory">
<option></option>
<option>Invoice with GR</option>
<option>Invoice without GR</option>
<option>Invoice without PO</option>
</select>
</td>
</tr>
<tr>
<td>Order :</td>
<td>
<select name="order">
<option> Number </option>
<option> Supplier </option>
<option> Date </option>
<option> Net Amount </option>
</select>
</td>
</tr>
<tr>
<td>
<button type="submit">Search</button>
</td>
<td>
<div class="detail">
<button type="reset">Cancel</button>
</div>
</td>
</tr>
</table>
</form>
I know that I didn't do anything so far, but I'm really new at angular2, and I really got confused. Can you help me please at least with the component part???
Thank you in advance !
解决方案
DONE !! - see@PLUNKER
@Component({
selector: 'app-search',
templateUrl: 'src/search.component.html'
})
export class SearchComponent{
invoiceList = [
{invoiceNumber: 1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527},
{invoiceNumber: 15672, invoiceSupplier : "test11", invoiceStatus : "Import error", invoiceCategory: "invoice without PO", date : "02/01/2017", amount : 134.3},
{invoiceNumber: 99863, invoiceSupplier : "test22", invoiceStatus : "Other Document", invoiceCategory: "invoice with GR", date : "10/12/2016", amount : 189},
{invoiceNumber: 24561, invoiceSupplier : "test50", invoiceStatus : "Other Document", invoiceCategory: "invoice without PO", date : "15/01/2017", amount : -134527},
];
invoiceCats = [];
invoiceStatuses = [];
invoiceNumbers = [];
invoiceFields = Object.keys(this.invoiceList[0]);
invoiceStatus = "";
invoiceCategory = "";
invoiceNumber;
invoiceSupplier;
order = this.invoiceFields[0];
searchResults = [];
constructor() {
this.invoiceList.forEach(i => {
if(this.invoiceCats.indexOf(i.invoiceCategory) === -1) {
this.invoiceCats.push(i.invoiceCategory);
}
if(this.invoiceStatuses.indexOf(i.invoiceStatus) === -1) {
this.invoiceStatuses.push(i.invoiceStatus);
}
this.invoiceNumbers.push(i.invoiceNumber);
})
}
ngOnInit() {
}
searchNow(e) {
e.preventDefault();
this.searchResults = this.invoiceList.filter(i => {
return (this.invoiceStatus ? i.invoiceStatus === this.invoiceStatus : true)
&& (this.invoiceNumber ? i.invoiceNumber === this.invoiceNumber : true)
&& (this.invoiceSupplier ? i.invoiceSupplier === this.invoiceSupplier : true)
&& (this.invoiceCategory ? i.invoiceCategory === this.invoiceCategory : true)
}).sort((a, b) => {
if(['invoiceNumber', 'amount'].indexOf(this.order) > -1) return a[this.order] - b[this.order];
if(['invoiceSupplier', 'invoiceStatus', 'invoiceCategory'].indexOf(this.order) > -1) return (a[this.order] == [a[this.order], b[this.order]].sort()[1] ? 1 : -1);
if(this.order === 'date') {
const x = new Date(a.date.split('/').reverse().join('/'));
const y = new Date(b.date.split('/').reverse().join('/'));
return x.getTime() - y.getTime();
}
})
}
}
Note: The code inside constructor is just to generate meta Data.
<form (submit)="searchNow($event)">
<table>
<tr>
<td>Invoice Number :</td>
<td>
<input name="invoiceNumber" [(ngModel)]="invoiceNumber" type="number">
</td>
<td>Invoice Supplier Name :</td>
<td>
<input name="invoiceSupplier" [(ngModel)]="invoiceSupplier" type="text">
</td>
</tr>
<tr>
<td>Invoice Status :</td>
<td>
<select name="invoiceStatus" [(ngModel)]="invoiceStatus">
<option value="">Any</option>
<option *ngFor="let iS of invoiceStatuses" [value]="iS">{{iS}}</option>
</select>
</td>
<td>Invoice Category :</td>
<td>
<select name="invoiceCategory" [(ngModel)]="invoiceCategory">
<option value="">Any</option>
<option *ngFor="let iC of invoiceCats" [value]="iC">{{iC}}</option>
</select>
</td>
</tr>
<tr>
<td>Order By:</td>
<td>
<select name="order" [(ngModel)]="order">
<option *ngFor="let iF of invoiceFields" [value]="iF">{{iF}}</option>
</select>
</td>
</tr>
<tr>
<td>
<button type="submit">Search</button>
</td>
<td>
<div class="detail">
<button type="reset">Cancel</button>
</div>
</td>
</tr>
</table>
</form>
<div>
<ul>
<li *ngFor="let i of searchResults">Number: {{i.invoiceNumber}}, Supplier: {{i.invoiceSupplier}}, Date: {{i.date}}</li>
</ul>
</div>
Note: There are many if not hundreds of ways to play with forms in Angular2
you can use whichever you like, I just used the easiest one.
这篇关于如何在 angular 2 中进行全局搜索?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!