angular2

Question

batchObj:any= [ 
       {'batch':'28','term':'Term I','section':'Section I'}, 
       {'batch':'28','term':'Term I','section':'Section II'}, 
       {'batch':'28','term':'Term I','section':'Section III'}, 
       {'batch':'28','term':'Term II','section':'Section I'}, 
       {'batch':'29','term':'Term I','section':'Section I'}, 
       {'batch':'29','term':'Term I','section':'Section II'}, 
       {'batch':'30','term':'Term I','section':'Section I'}, 
       {'batch':'31','term':'Term I','section':'Section I'} 
       ]; 

HTMLで異なる選択ボックスでオブジェクトをフィルタ処理する方法

Batch : <select [(ngModel)]="sel_batch" > <option >Select Batch</option> 
         <option *ngFor="let item of batchObj;">{{item.batch}}</option> 
       </select> 
     Term : <select [(ngModel)]="sel_term"> <option>Select Term</option> 
     <option *ngFor="let item of batchObj;">{{item.term}}</option> 
     </select>   
     Section : <select [(ngModel)]="sel_section"> <option>Select Section</option> 
     <option *ngFor="let item of batchObj;">{{item.section}}</option> 
     </select> 

ページのロードdistinct batchストアsel_batch select boxで、その後時に選択batch選択termときにsection select boxにするためにterm select box同じ作業中に表示されるはずですterm関連

角2でどのようにするのですか？

Answer 1

あなたは今のhtmlが

Batch : <select [(ngModel)]="sel_batch" > <option >Select Batch</option> 
         <option *ngFor="let item of batchObj| filterPipe;">{{item.batch}}</option> 
       </select> 
     Term : <select [(ngModel)]="sel_term"> <option>Select Term</option> 
     <option *ngFor="let item of batchObj | filterPipe: ['batch', sel_batch, 'term'];">{{item.term}}</option> 
     </select>   
     Section : <select [(ngModel)]="sel_section"> <option>Select Section</option> 
     <option *ngFor="let item of batchObj | filterPipe: ['term', sel_term, 'section'];">{{item.section}}</option> 
     </select> 

なりますangular2パイプ

を利用することができますし、filterPipe.tsは

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filterPipe' 
}) 

export class filterPipe implements PipeTransform { 
    transform (value: Array<any>, args?: any) { 
     let filterArray = []; 
     let filterArray1 = []; 
     if (args) { 
      filterArray1 = value.filter(function(val, key) { 
       if (val[args[0]] === args[1] && filterArray.indexOf(val[args[2]]) < 0) { 
       filterArray.push(val[args[2]]); 
       return true; 
       } else { 
       return false; 
       } 
      }); 
     } else { 
      filterArray1 = value.filter(function(val, key) { 
      if (filterArray.indexOf(val.batch) < 0) { 
       filterArray.push(val.batch); 
       return true; 
      } else { 
       return false; 
      } 
      }); 
     } 
     return filterArray1; 
    } 
} 

はあなたの宣言でfilterPipeを含めるとなります。これを試してみてください