Ionic 4 : ionChange from select

Ionic Framework
1

Hi all,

Need help. I am already stuck.
I want to pass value from select on change
to pass the variable to select from firestore.

Here is the coding
tab2.pages.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Senarai Aktiviti</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
   <ion-item>
    <ion-label>Semester</ion-label>
    <ion-select interface="popup" [(ngModel)]="semSelected" (ngModelChange)="getPostEntry($event)">
      <ion-select-option value="20192">Mac 2019 -Jul 2019</ion-select-option>
      <ion-select-option value="20184">Sept 2018 - Jan 2019</ion-select-option>
    </ion-select>
  </ion-item> 
  
   <ion-list>  
    <ion-item *ngFor="let activity of activities"  class="list" button routerLink="/event-detail/{{activity.elEventID}}">
      <ion-label class="event">{{ activity.elEventName }}</ion-label>
      <ion-icon name="calendar"></ion-icon><p>{{ activity.elStartDate }}</p>   
      <!-- <pre>{{ activity | json }}</pre> -->
    </ion-item>
  </ion-list> 

 <p>semselected :{{semSelected}}</p> // << this value displayed the semester when the semester is selected

</ion-content>

tab2.pages.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';


@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
    public activities: Observable<any[]>;   
    public semSelected:any; 

    private todosCollection: AngularFirestoreCollection<any>;
    
  constructor ( 
    public db: AngularFirestore ) 
    {}

  
   getAllPosts (): Observable<any> {


    this.semSelected=this.selectHandler(event)
//original data from firestore
 return this.db.collection<any>( "activity" ).doc<any>("123456").collection<any>("elSemester").doc<any>("20192").collection<any>("activity").valueChanges ();

// i want to change into 
   return this.db.collection<any>( "activity" ).doc<any>("123456").collection<any>("elSemester").doc<any>(this.semSelected).collection<any>("activity").valueChanges ();

  }
  
  selectHandler(event)
  {
     this.semSelected=event.target.value;
     return this.semSelected;
  }
 
  
  ngOnInit( ) {  
       
    this.getAllPosts().subscribe((data)=>{
      this.activities = data;
      console.log(data);
    });
  
  }

  

}
2

I think the <ion-select> needs an [(ngModel)] directive to store the selected value

3

already did that…but still not ok

4

Try using the (ionChange) event on the select instead

2 Likes