我是angular2中的新开发者,我想在json对象数组中进行全局搜索.例如,这个数组：
invoiceList =
[
{
invoiceNumber: 1234,invoiceSupplier: "test",invoiceStatus: "Import error",invoiceCategory: "invoice with GR",date: "22/01/2017",amount : 134527
},...
];
我想这样做我的搜索：
问题和困难在于：
>我想仅根据某些值进行搜索(例如：状态,供应商名称,编号……)并显示其他字段(如日期,净金额等).
>我想根据一些值(例如：数量,供应商,日期和金额)按最终结果排序.而且我不知道如何在angular2中做到这一点.
>最后,我想在angular2中做一个“等效”的ng-show？我的意思是我只想按下搜索按钮才能显示表格,如果我们点击取消,它将删除它.
我知道在角度1中这样做很简单,我们可以使用过滤器,’orderBy’和类似的东西,但显然在angular2中,我们不能这样做而且我非常困惑.你能帮我解决一下吗???
这是我的组件代码：
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",date : "22/01/2017",amount : 134527},{invoiceNumber: 15672,invoiceSupplier : "test11",invoiceCategory: "invoice without PO",date : "02/01/2017",amount : 134.3},{invoiceNumber: 99863,invoiceSupplier : "test22",invoiceStatus : "Other Document",date : "10/12/2016",amount : 189},{invoiceNumber: 24561,invoiceSupplier : "test50",date : "15/01/2017",amount : -134527},];
constructor() { }
ngOnInit() {
}
}
和我的HTML代码：
<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>
我知道到目前为止我没有做任何事情,但我在angular2时真的很新,我真的很困惑.你能帮助我至少与组件部分???
先感谢您 ！
完成!! –
see@PLUNKER
原文链接：https://www.f2er.com/angularjs/141744.html@Component({
selector: 'app-search',templateUrl: 'src/search.component.html'
})
export class SearchComponent{
invoiceList = [
{invoiceNumber: 1234,];
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();
}
})
}
}
<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>
