typescript - วิธีการทำการค้นหาแบบทั่วโลกใน angular 2?
ฉันเป็นนักพัฒนามือใหม่ใน Angular2 และฉันต้องการทำการค้นหาทั่วโลกในอาร์เรย์ของวัตถุ JSON ตัวอย่างเช่น อาร์เรย์นี้ :
invoiceList =
[
{
invoiceNumber: 1234,
invoiceSupplier: "test",
invoiceStatus: "Import error",
invoiceCategory: "invoice with GR",
date: "22/01/2017",
amount : 134527
},
...
];
และฉันต้องการทำการค้นหาของฉันแบบนั้น:
ปัญหาและความยากลำบากที่นี่คือ:
- ฉันต้องการค้นหาโดยขึ้นอยู่กับเพียงค่าบางอย่าง (เช่น: สถานะ, ชื่อผู้จำหน่าย, หมายเลข...) และแสดงช่องข้อมูลอื่น ๆ (เช่น วันที่, จำนวนสุทธิ ฯลฯ)
- ฉันต้องการจัดลำดับตามผลลัพธ์สุดท้ายขึ้นอยู่กับค่าบางอย่าง (เช่น ตัวเลข ผู้จัดหา วันและจำนวนเงิน) และฉันไม่รู้ว่าจะทำอย่างไรใน Angular2
- สุดท้าย ผมอยากจะทำสิ่งที่ 'เทียบเท่า' กับ ng-show ใน angular2? หมายความว่าผมต้องการแสดงตารางก็ต่อเมื่อเรากดปุ่มค้นหา และถ้าเราคลิกยกเลิก มันก็จะหายไป
ฉันรู้ว่ามันง่ายที่จะทำสิ่งนั้นใน Angular 1 เราสามารถใช้ฟิลเตอร์ 'orderBy' และสิ่งต่างๆ แบบนั้นได้ แต่ชัดเจนว่าใน Angular 2 เราไม่สามารถทำแบบนั้นได้ และฉันสับสนมากๆ คุณช่วยฉันแก้ปัญหานี้ได้ไหม?
นี่คือโค้ดคอมโพเนนต์ของฉัน :
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 จริง ๆ และฉันสับสนมาก คุณช่วยฉันได้ไหม อย่างน้อยก็ในส่วนของคอมโพเนนต์???
ขอขอบคุณล่วงหน้า!
คำตอบ #1
เสร็จแล้ว !! - ดูที่@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();
}
})
}
}
หมายเหตุ: โค้ดภายในคอนสตรัคเตอร์นั้นมีไว้เพื่อสร้างข้อมูลเมตาเท่านั้น
<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 คุณสามารถใช้วิธีใดก็ได้ที่คุณชอบ ฉันแค่ใช้วิธีที่ง่ายที่สุด
คำตอบ #2
ยังไม่เสร็จสมบูรณ์ แต่เพื่อให้คุณมีพื้นฐาน ...
import { Component, OnInit } from '@angular/core';
export class Invoice {
invoiceNumber: number;
invoiceSupplier: string;
invoiceStatus: string;
invoiceCategory: string;
date: string;
amount: number
}
@Component({
moduleId: module.id,
selector: 'my-app',
template: `
<div></div>
`,
styleUrls: []
})
export class AppComponent implements OnInit {
ngOnInit(): void {
this.invoiceList = [ {invoiceNumber: 1231, invoiceSupplier: "test1", invoiceStatus: "Import error3", invoiceCategory: "invoice with GR1", date: "22/01/2017", amount : 134527 },
{invoiceNumber: 1232, invoiceSupplier: "test1", invoiceStatus: "Import error2", invoiceCategory: "invoice with GR2", date: "22/01/2017", amount : 134527 },
{invoiceNumber: 1233, invoiceSupplier: "test2", invoiceStatus: "Import error1", invoiceCategory: "invoice with GR1", date: "22/01/2017", amount : 134527 },
{invoiceNumber: 1234, invoiceSupplier: "test3", invoiceStatus: "Import error3", invoiceCategory: "invoice with GR3", date: "22/01/2017", amount : 134527 },
];
//this.invoiceFilter.invoiceNumber = 1234;
//this.invoiceFilter.invoiceSupplier = "test2";
this.invoiceFilter.invoiceCategory = "invoice with GR2";
let filterdeInvoices = this.filterInvoices(this.invoiceList, this.invoiceFilter);
console.log(filterdeInvoices);
this.fieldToSortBy = "invoiceNumber";
let sortedInvoices = this.sortInvoices(filterdeInvoices, this.fieldToSortBy);
console.log(sortedInvoices);
}
invoiceFilter = new Invoice();
fieldToSortBy: string;
invoiceList: Invoice[];
filterInvoices(invoiceList:Invoice[], invoiceFilter: Invoice): Invoice[] {
return invoiceList.filter((invoice) => (invoiceFilter.invoiceNumber ? invoiceFilter.invoiceNumber === invoice.invoiceNumber : true) &&
(invoiceFilter.invoiceSupplier ? invoiceFilter.invoiceSupplier === invoice.invoiceSupplier : true) &&
(invoiceFilter.invoiceStatus ? invoiceFilter.invoiceStatus === invoice.invoiceStatus : true) &&
(invoiceFilter.invoiceCategory ? invoiceFilter.invoiceCategory === invoice.invoiceCategory : true));
}
sortInvoices(invoiceList:Invoice[], fieldToSortBy: string): Invoice[] {
return invoiceList.sort((inv1, inv2) => (inv1[fieldToSortBy] > inv2[fieldToSortBy] ? 1 : -1));
}
}