我是 angular2 的新开发人员，我想在 json 对象数组中进行全局搜索。例如，这个数组：
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 :
这里的问题和困难在于：
我知道在 Angular 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", 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() {
}
}
和我的 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 真的很陌生，我真的很困惑。你能至少帮我解决组件部分吗？？？
先感谢您 ！
DONE !! - 参见@PLUNKER http://plnkr.co/edit/u2sPdTAuAxPCPeaQhgBj?p=preview
@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();
}
})
}
}
注意：构造函数中的代码只是生成元数据。
<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>
注意：在游戏中使用表单的方法有很多（如果不是数百种）Angular2你可以用你喜欢的那个，我只是用了最简单的一个。