jsonファイルからコンテンツをフェッチする際にセグメントレベルでフィルタを適用する方法

Question

ionic 2アプリケーションで1つのセグメントから別のセグメントに移動中にjsonファイルからコンテンツをフェッチしようとしています。だから、問題は、私は3つのセグメント1.ボード、2.グレード、3. mybooksはseg2からseg2のクラス1をクリックしてseg2画面に到達したボードを選択してseg1からseg2にグレードするmybooksは、クラス1の書籍のみを表示して、クラスベースでjsonからseg3までのフィルタリングに必要なコンテンツを表示または表示します。どうすれば実現できますか助けてください。

私はそれのために使用しているコード：

export class HomePage { 
 
Segments: string = "board"; // This is to set the tab content on the screen when its is opened. 
 
public posts: any; 
 
public board_icse: any; 
 
    public board_cbse: any; 
 
public text: String; 
 
    private barcodeText:String; 
 
    private barcodeFormat:String; 
 
    private platform:Platform; 
 
    private navController:NavController; 
 
    
 
    constructor(public navCtrl: NavController,platform:Platform, public http: Http) { 
 
     this.platform = platform; 
 
     this.navController = navCtrl; 
 
\t \t 
 
\t \t 
 
\t //this.http.get('/android_asset/www/assets/data/subjects.json').map(res => res.json()).subscribe( //..for running on mobile.. 
 
    this.http.get('/assets/data/subjects.json').map(res => res.json()).subscribe(    //..for running on desktop 
 
    response => { 
 
     this.posts = response; 
 
\t \t 
 
\t \t this.board_cbse = response.filter(item => item.Board === 'CBSE'); 
 
\t \t 
 
\t \t this.board_icse = response.filter(item => item.Board === 'ICSE'); 
 
\t \t 
 
\t \t console.log("This is subjects from json file"+ this.posts); 
 
\t \t console.log("This is subjects from json file"+ this.board_cbse); 
 
\t \t console.log("This is subjects from json file"+ this.board_icse); 
 
\t \t }, 
 
    err => { 
 
     console.log("Oops!"); 
 
    }); 
 
\t \t 
 
\t \t 
 
\t \t 
 
} 
 
} 
 

<ion-segment [(ngModel)]="Segments"> 
 
     <ion-segment-button value="board"> 
 
     <b>Select Board</b> 
 
     </ion-segment-button> 
 
     <ion-segment-button value="grade"> 
 
     <b>Grade</b> 
 
     </ion-segment-button> 
 
\t <ion-segment-button value="mycourses"> 
 
     <b>My Books</b> 
 
     </ion-segment-button> 
 
    </ion-segment> 
 

 

 

 
<div [ngSwitch]="Segments"> 
 
    <ion-list *ngSwitchCase="'board'"> 
 
     <ion-item> 
 
     <ion-thumbnail item-start> 
 
      <img src="img/cbse.jpg"> 
 
     </ion-thumbnail> 
 
\t \t <ion-segment-button value="board1" (click)="Segments ='grade' " style="text-align: left !Important"> 
 
     <b>ICSE</b> 
 
     </ion-segment-button> 
 
\t \t </ion-item> 
 
\t <ion-item> 
 
     <ion-thumbnail item-start> 
 
      <img src="img/icse.jpg"> 
 
     </ion-thumbnail> 
 
     <ion-segment-button value="board2" (click)="Segments ='grade' " style="text-align: left !Important"> 
 
     <b>CBSE</b> 
 
     </ion-segment-button> 
 
     </ion-item> 
 
    </ion-list> 
 

 
\t 
 
    <ion-grid *ngSwitchCase="'grade'"> 
 
    
 
    <ion-row> 
 
    <ion-col> 
 
\t <ion-segment-button value="garde1"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 1</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    
 
\t <ion-col> 
 
\t <ion-segment-button value="garde1"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 2</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    </ion-row> 
 
    
 
    <ion-row> 
 
    <ion-col> 
 
\t <ion-segment-button value="garde1"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 3</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    
 
\t <ion-col> 
 
\t <ion-segment-button value="garde1"> 
 
    <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 4</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    </ion-row> 
 
    
 
    <ion-row> 
 
    <ion-col> 
 
    <ion-segment-button value="garde1"> \t 
 
    <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 5</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    
 
\t <ion-col> 
 
\t <ion-segment-button value="garde1"> 
 
    <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;" (click)="Segments ='mycourses'">Class 6</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    </ion-row> 
 
    
 

 
</ion-grid> 
 

 
    
 
    
 
<!-- This is showing tabs for the cbse grades --> 
 
<ion-list padding *ngSwitchCase="'mycourses'"> 
 
<ion-list *ngFor="let post of board_icse"> 
 
<ion-card > 
 

 
    <img src="img/{{post.src}}" /> 
 
    <ion-row no-padding> 
 
     <!--<ion-col> 
 
     <button ion-button clear small icon-start> 
 
      <ion-icon name='cart'></ion-icon> 
 
      Add to cart 
 
     </button> 
 
     </ion-col> --> 
 
     <ion-col text-center> 
 
     <button ion-button clear small icon-start> 
 
      {{post.Name}} 
 
     </button> 
 
     </ion-col> 
 
     <ion-col text-right> 
 
     <button ion-button clear small icon-start (click)="scan()"> 
 
      Scan Bar code 
 
     </button> 
 
     </ion-col> 
 
    </ion-row> 
 
\t </ion-card> 
 

 
</ion-list> 
 

 
\t 
 
\t 
 

 

 
<ion-list *ngFor="let post of board_cbse"> 
 
<ion-card > 
 

 
    <img src="img/{{post.src}}" /> 
 
    <ion-row no-padding> 
 
     <!--<ion-col> 
 
     <button ion-button clear small icon-start> 
 
      <ion-icon name='cart'></ion-icon> 
 
      Add to cart 
 
     </button> 
 
     </ion-col> --> 
 
     <ion-col text-center> 
 
     <button ion-button clear small icon-start> 
 
      {{post.Name}} 
 
     </button> 
 
     </ion-col> 
 
     <ion-col text-right> 
 
     <button ion-button clear small icon-start (click)="scan()"> 
 
      Scan Bar code 
 
     </button> 
 
     </ion-col> 
 
    </ion-row> 
 
\t </ion-card> 
 

 
\t </ion-list> 
 
\t 
 
</ion-list> 
 
\t 
 
    \t 
 
</div>

Answer 1

このソリューションをお試しください。私はあなたがこれを動的にすることができますデモのためにshowBooksByClassName()に静的クラス番号を渡してきた

HTMLファイル

<ion-list *ngSwitchCase="'grade'"> 
     <ion-item> 
     <ion-thumbnail item-start> 
      <img src="img/class1.jpg"> 
     </ion-thumbnail> 
     <ion-segment-button value="class1" (click)="showBooksByClassName(1)" style="text-align: left !Important"> 
     <b>Class 1</b> 
     </ion-segment-button> 
     </ion-item> 
     <ion-item> 
     <ion-thumbnail item-start> 
      <img src="img/class2.jpg"> 
     </ion-thumbnail> 
     <ion-segment-button value="class2" (click)="showBooksByClassName(2)" style="text-align: left !Important"> 
     <b>Class 2</b> 
     </ion-segment-button> 
     </ion-item> 
    </ion-list> 

ホームページのクラス

showBooksByClassName(classNumber: string) { 

    let board = this.posts.filter(item => item.Board === 'ICSE'); 
    let booksCovers = board.filter(item => item.Class === classNumber); // Here you got book covers filterd data. 
    this.Segments = "mycourses"; 
} 

。

また、<ion-list *ngSwitchCase="'mycourses'"></ion-list> を作成し、書籍のデータを表示する必要があります。

Answer 2

最後に、ボード上の2つの関数を呼び出し、seg2でそのボードのクラス名をキャプチャしてhtmlファイルに表示することで、どのように実現しましたか？

showboard(boardName: string) 
 
{ 
 
console.log("class name obtained "+ boardName); 
 

 
this.Segments = "grade"; 
 

 
this.myboard = this.posts.filter(item => item.Board === boardName); 
 
console.log("board obtained on clicking on board "+ this.myboard); 
 
} 
 

 
showBooksByClassName(classNumber: String) { 
 
    
 
\t console.log("class name obtained as parameter "+ classNumber); 
 
\t console.log("class myboard obtained from above function "+ this.myboard); 
 
\t 
 
    this.board = this.myboard.filter(item => item.Class == classNumber); 
 
\t console.log("This is board from json file="+ this.board); 
 

 
\t 
 
    this.Segments = "mycourses"; 
 
} 
 

<ion-content> 
 

 

 
<div [ngSwitch]="Segments"> 
 
    <ion-list *ngSwitchCase="'board'"> 
 
     <ion-item> 
 
     <ion-thumbnail item-start> 
 
      <img src="img/cbse.jpg"> 
 
     </ion-thumbnail> 
 
\t \t <ion-segment-button value="board1" (click)="showboard('ICSE')" style="text-align: left !Important"> 
 
     <b>ICSE</b> 
 
     </ion-segment-button> 
 
\t \t </ion-item> 
 
\t <ion-item> 
 
     <ion-thumbnail item-start> 
 
      <img src="img/icse.jpg"> 
 
     </ion-thumbnail> 
 
     <ion-segment-button value="board2" (click)="showboard('CBSE')" style="text-align: left !Important"> 
 
     <b>CBSE</b> 
 
     </ion-segment-button> 
 
     </ion-item> 
 
     
 
    </ion-list> 
 

 
\t 
 
    <ion-grid *ngSwitchCase="'grade'"> 
 
    
 
    <ion-row> 
 
    <ion-col> 
 
\t <ion-segment-button value="garde1" (click)="showBooksByClassName('1')"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;">Class 1</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    
 
\t <ion-col> 
 
\t <ion-segment-button value="garde1" (click)="showBooksByClassName('2')"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;">Class 2</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    </ion-row> 
 
    
 
    <ion-row> 
 
    <ion-col> 
 
\t <ion-segment-button value="garde1" (click)="showBooksByClassName('3')"> 
 
\t <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;">Class 3</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
    <ion-col> 
 
\t <ion-segment-button value="garde1" (click)="showBooksByClassName('6')"> 
 
    <ion-card color="explore_grade"> 
 
    <ion-card-header> 
 
    <p style="text-align: center; padding-top: 20%;">Class 6</p> 
 
    </ion-card-header> 
 
\t <ion-card-content> 
 
    <!-- Add card content here! --> 
 
    </ion-card-content> 
 
    </ion-card> 
 
\t </ion-segment-button> 
 
    </ion-col> 
 
\t 
 
    </ion-row> 
 

 
    
 

 
</ion-grid> 
 

 

 
    
 
    
 
<!-- This is showing tabs for the cbse grades --> 
 
<ion-list padding *ngSwitchCase="'mycourses'"> 
 

 
<ion-list *ngFor="let post of board"> 
 
<ion-card > 
 

 
    <img src="img/{{post.src}}" /> 
 
    <ion-row no-padding> 
 
     <!--<ion-col> 
 
     <button ion-button clear small icon-start> 
 
      <ion-icon name='cart'></ion-icon> 
 
      Add to cart 
 
     </button> 
 
     </ion-col> --> 
 
     <ion-col text-center> 
 
     <button ion-button clear small icon-start> 
 
      {{post.Name}} 
 
     </button> 
 
     </ion-col> 
 
     <ion-col text-right> 
 
     <button ion-button clear small icon-start (click)="scan()"> 
 
      Scan Bar code 
 
     </button> 
 
     </ion-col> 
 
    </ion-row> 
 
\t </ion-card> 
 

 
</ion-list>