如何在角度2中进行全局搜索？

Question

我是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", 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时真的很新,我真的很困惑.你能帮助我至少与组件部分???

先感谢您 !

Answer 1

不完整，但给你基础......

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));
    }
}