gewusst wie: filtern von json-Daten mit angular2

json-Daten

 [{"masterbatch":"29",
   "batch": [{"subgroupname":"Batch 1"},{"subgroupname":"Batch 10"},{"subgroupname":"Batch 11"},{"subgroupname":"Batch 12"},{"subgroupname":"Batch 13"},{"subgroupname":"Batch 14"},{"subgroupname":"Batch 15"},{"subgroupname":"Batch 16"},{"subgroupname":"Batch 17"},{"subgroupname":"Batch 2"},{"subgroupname":"Batch 3"},{"subgroupname":"Batch 4"},{"subgroupname":"Batch 5"},{"subgroupname":"Batch 6"},{"subgroupname":"Batch 7"},{"subgroupname":"Batch 8"},{"subgroupname":"Batch 9"}],

   "group":[{"groupname":"Group I"},{"groupname":"Group II"},{"groupname":"Group III"},{"groupname":"Group IV"},{"groupname":"Group IX"},{"groupname":"Group V"},{"groupname":"Group VI"},{"groupname":"Group VII"},{"groupname":"Group VIII"}],

   "section":[{"Sections":"Section I"},{"Sections":"Section II"},{"Sections":"Section III"},{"Sections":"Section IV"}]

  }];

html

      Select Type :
        <select [(ngModel)]="sel_type"  style="width:100px;">
            <option value='Select Type'>Select Type</option>
            <option>section</option>
            <option>group</option>
            <option>batch</option>
       </select>
      <select  [(ngModel)]="sel_subtype"  style="width:100px;"></select>

wenn ich wählen sel_type gleich batch dann übertragen die Daten zum nächsten Feld auswählen sel_subtype nur Stapel von json object

gleiche für group und section

wie man es angular2?

InformationsquelleAutor Pravin | 2017-01-11



2 Replies
  1. 1

    Können Sie erstellen eine Funktion in der Komponente, von der Sie festlegen können sub-Typen :

    //Komponente

    public batches : any = [
      {
        "masterbatch":"29",
        "batch": [
          {"subgroupname":"Batch 1"},{"subgroupname":"Batch 10"},{"subgroupname":"Batch 11"},{"subgroupname":"Batch 12"},{"subgroupname":"Batch 13"},{"subgroupname":"Batch 14"},{"subgroupname":"Batch 15"},{"subgroupname":"Batch 16"},{"subgroupname":"Batch 17"},{"subgroupname":"Batch 2"},{"subgroupname":"Batch 3"},{"subgroupname":"Batch 4"},{"subgroupname":"Batch 5"},{"subgroupname":"Batch 6"},{"subgroupname":"Batch 7"},{"subgroupname":"Batch 8"},{"subgroupname":"Batch 9"}
        ],
    
        "group":[
          {"groupname":"Group I"},{"groupname":"Group II"},{"groupname":"Group III"},{"groupname":"Group IV"},{"groupname":"Group IX"},{"groupname":"Group V"},{"groupname":"Group VI"},{"groupname":"Group VII"},{"groupname":"Group VIII"}
        ],
    
        "section":[
          {"Sections":"Section I"},{"Sections":"Section II"},{"Sections":"Section III"},{"Sections":"Section IV"}
        ]    
      }
    ];
    public subTypes: any[] = [];
    
    public function onChange(type:string){
        this.subTypes = this.batches[0][type].length ? this.batches[0][type] : [];
    }
    

    //HTML –

    Select Type :
    <select [(ngModel)]="sel_type"  style="width:100px;" (change)="onChange(sel_type);">
      <option value='Select Type'>Select Type</option>
      <option value="section">section</option>
      <option value="group">group</option>
      <option value="batch">batch</option>
    </select>
    <select [(ngModel)]="sel_subtype"  style="width:100px;">
      <option value='Select Type'>Select Sub Type</option>
      <option [value]="type.groupname" *ngFor="let type of subTypes">{{type.groupname}}</option>
    </select>
    
    • Lösung die Arbeit für die Gruppe, die sich nur auf andere zeigt null
    • es ist, weil der Schlüssel für die andere Gruppe sind unterschiedlich wie subgroupname, groupname, Sections und ich habe nur verwendet groupname in HTML
    • wie Sie andere
    • Sie brauchen, um alle Schlüssel gleich aus der Quelle, die Sie bekommen, oder innen onChange müssen Sie eine Schleife durch und machen ein weiteres array als pro type – und-key-überprüfung drin
    • Lösung für harte Arbeit Wert, wenn ich übergeben Sie den Wert direkt mit der Datenbank, es zeigt Fehler wie verursacht durch: Cannot read property ‚Länge‘ undefined
  2. 1
    You can easily add a pipe for such use case and use it may be some like this can be useful for your case . You can try it with with selct dropdown as well it works with ul and li .
    
    import {Injectable, Pipe} from 'angular2/core';
    
    @Pipe({
    name: 'myfilter'
    })
    
      @Injectable()
      export class MyFilterPipe implements PipeTransform {
        transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
    

    }

      And use it:
    
     import { MyFilterPipe } from './filter-pipe';
        (...)
    
        @Component({
        selector: 'my-component',
        pipes: [ MyFilterPipe ],
        template: ` <ul>
           <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
       </ul>       `
     })
    

    Ein anderer Ansatz könnte sein, fügen Sie Ereignis auf der select-Liste und filtern Sie die Daten der anderen Komponente, in Typoskript-Komponente verwenden, es in schriftlicher filter-Funktion .

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.