Como fazer uma pesquisa global em angular 2?

8

Sou um novo desenvolvedor em angular2 e quero fazer uma pesquisa global em uma matriz de objetos json. Por exemplo, esta matriz:

invoiceList = 
  [
    {
      invoiceNumber: 1234, 
      invoiceSupplier: "test", 
      invoiceStatus: "Import error", 
      invoiceCategory: "invoice with GR", 
      date: "22/01/2017", 
      amount : 134527
    },
    ...
  ];

E eu quero fazer minha pesquisa assim:

Oproblemaeadificuldadeaquisão:

  • Euqueropesquisardependendoapenasdealgunsvalores(ex:status,nomedofornecedor,número...)eexibiroutroscampos(comodata,valorlíquido,etc.).
  • Euqueroencomendarpelosresultadosfinais,dependendodealgunsvalores(ex:número,fornecedor,dataevalor).Eeunãoseicomofazerissoemangular2.
  • Finalmente,querofazerum"equivalente" de ng-show em angular2? Quero dizer que eu quero exibir a tabela somente se pressionarmos o botão de pesquisa, e se clicarmos em cancelar, ele irá removê-lo.

Eu sei que era simples fazer isso em angular 1, podemos usar filtros, 'orderBy' e coisas assim, mas aparentemente em angular2, não podemos fazer isso e fiquei muito confuso. Você pode me ajudar a resolver isso, por favor?

aqui está o código do meu componente:

  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() {
    }

  }

e meu código 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>

Eu sei que não fiz nada até agora, mas sou muito novo no angular2 e fiquei muito confuso. Você pode me ajudar por favor pelo menos com a parte do componente ???

Obrigado antecipadamente!

    
por salamanka44 23.01.2017 в 16:25
fonte

3 respostas

2

FEITO !! - consulte @ 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();
      }
   })
 }

}

Nota: O código dentro do construtor é apenas para gerar metadados.

 <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>

Nota: Existem muitas, se não centenas, maneiras de jogar com formulários em Angular2 , você pode usar o que quiser, eu apenas usei o mais fácil.

    
por Ankit Singh 30.01.2017 / 14:21
fonte
0

Não concluído, mas para lhe dar a base ...

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));
    }
}
    
por Faly 26.01.2017 / 15:50
fonte
0

Eu recomendaria usar um Pipe para filtrar coisas como essa.

Seu Pipe poderia ser assim:

  1. verificar variáveis de entrada
  2. filtre suas faturas
  3. encomende-os se necessário
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  public transform(invoices: Invoice[], searchOptions: any): Invoice[] {
    if (!invoices || !invoices.length) return [];
    if (!searchOptions) return [];

    let filtered = invoices.filter(i => {
      return i &&
             (!searchOptions.number || i.invoiceNumber.toString().indexOf(searchOptions.number) >= 0) &&
             (!searchOptions.name || i.invoiceSupplier.toLowerCase().indexOf(searchOptions.name.toLowerCase()) >= 0) &&
             (!searchOptions.status || i.invoiceStatus === searchOptions.status) &&
             (!searchOptions.category || i.invoiceCategory === searchOptions.category);
    });

    let orderBy = searchOptions.orderBy;
    if (!orderBy) return filtered;

    /* credits for sorting goes to: 'Ankit Singh' ! :) */
    return filtered.sort((a, b) => {

      switch (orderBy) {
        default: return 0;

        case 'invoiceNumber':
        case 'amount':
          return a[orderBy] - b[orderBy];
        case 'invoiceSupplier':
        case 'invoiceStatus':
        case 'invoiceCategory':
          return (a[orderBy] == [a[orderBy], b[orderBy]].sort()[1] ? 1 : -1);
        case 'date': {
          const x = new Date(a.date.split('/').reverse().join('/'));
          const y = new Date(b.date.split('/').reverse().join('/'));
          return x.getTime() - y.getTime();
        }
      }
   });
  }
}

E use este Pipe da seguinte maneira:

<div class="row" *ngFor="let invoice of invoiceList | filter:searchOptions">
  <div>{{ invoice.invoiceNumber }}</div>
  <div>{{ invoice.invoiceSupplier }}</div>
  <div>{{ invoice.date }}</div>
  <div>{{ invoice.amount }}</div>
</div>

Esses searchOptions são um objeto que vem do nosso formulário:

                

<md-input-container>
  <input mdInput ngModel name="name" placeholder="Invoice supplier name">
</md-input-container>

<md-select placeholder="Invoice status" ngModel name="status">
  <md-option *ngFor="let status of statusArray" [value]="status.val">
    {{ status.name}}
  </md-option>
</md-select>

<md-select placeholder="Invoice category" ngModel name="category">
  <md-option *ngFor="let category of categoryArray" [value]="category.val">
    {{ category.name}}
  </md-option>
</md-select>

<md-select placeholder="order by" ngModel name="orderBy">
  <md-option *ngFor="let key of invoiceKeyArray" [value]="key.val">
    {{ key.name }}
  </md-option>
</md-select>

<button md-raised-button color="primary" (click)="searchOptions = f.value">search</button>
<button md-raised-button color="accent" (click)="resetForm(f);">reset</button>

demonstração ao vivo: link

    
por mxii 31.01.2017 / 14:03
fonte