Ion-Select Dynamic

Question

I'm cracking the head with this problem, I wonder if anyone could help me. When I click a button, I have a list of products received from the database, now I've created a select with the zones: south, north, center. .... What I need is: When selecting any zone, show only the products of that zone. It is an initial filter, available in the south zone when clicking on the products button, Show only products from the south. But I'm not feeling what I must do to achieve this. Can anyone give me an idea?

Home.HTML

    <ion-select interface="popover" (ionChange)="selecionaregiao()"
    [(ngModel)]="regiao" class="optselect" padding>
       <ion-option *ngFor="let regiao of regioes">{{regiao.nom_regiao}}
       </ion-option>
    </ion-select>

Home.TS

 ionViewDidLoad() {
this.db.getRegiao()
.then(data => this.regioes = data)
.catch(error => console.log('Something want wrong!'));
console.log();

this.viewCtrl.setBackButtonText('');
} 
selecionaregiao() {                                               // Select Região //
this.db.getProdutosregiao()
       .then(data => this.regioes = data)
       .catch(error => console.log('Something want wrong!'));

} 

DATABASE.TS

getRegiao(){                  // Regiões // 
return new Promise<Regiao[]>((resolve, reject) => {   
  let sql = "SELECT TR.NOM_REGIAO " + 
            "FROM TB_REGIAO TR " 

  console.log(sql);  
  this.executeQuery(sql).then(data => {
    let regioes = [];
    data.forEach(function (row) {
      let regiao: Regiao = { nom_regiao: row[0]}
      regioes.push(regiao);
    });
    resolve(regioes);

  }).catch(error => {
    console.log(error);
      });

      });

      }

     getProdutosregiao(){                      
     return new Promise<Regiao[]>((resolve, reject) => {   
     let sql = "SELECT NOM_PRODUTO, DESC_PRODUTO, VAL_PRODUTO, 
     DESC_DESCONTO, 
    DESC_EXPERIENCIA, NOM_PATHIMAGEM, NOM_ENDERECO, NOM_COMPLEMENTO, 
    NOM_BAIRRO, 
    NOM_CIDADE, COD_UF, NUM_CEP, DESC_FUNCIONAMENTO, NOM_PATHIMAGEM_DESC " +
            "FROM TB_PRODUTO "


  console.log(sql);  
  this.executeQuery(sql).then(data => {
    let regioes = [];
    data.forEach(function (row) {
      let regiao: Regiao = { nom_regiao: row[0]}
      regioes.push(regiao);
    });
    resolve(regioes);

  }).catch(error => {
    console.log(error);
  });

   });

  }

img

Answer 1

First add the REGIAO_ID to the options you are loading:

getRegiao() {
    return new Promise<Regiao[]>((resolve, reject) => {
      let sql = "SELECT TR.NOM_REGIAO, TR.REGIAO_ID " +
        "FROM TB_REGIAO TR "
      console.log(sql);
      this.executeQuery(sql).then(data => {
        let regioes = [];
        data.forEach(function (row) {
          let regiao: Regiao = { nom_regiao: row[0], id_regiao: row[1] }
          regioes.push(regiao);
        });
        resolve(regioes);
      }).catch(error => {
        console.log(error);
      });
    });
  }

After that add in the view the event to get the id and also the value of the ion-option:

<ion-select interface="popover" (ionChange)="selecionaregiao($event)"
    [(ngModel)]="regiao" class="optselect" padding>
       <ion-option *ngFor="let regiao of regioes" [value]="regiao.id_regiao">{{regiao.nom_regiao}}
       </ion-option>
    </ion-select>

When you are going to load the products send the parameter you received in the $event

selecionaregiao(id_regiao) {
    this.db.getProdutosregiao(id_regiao)
       .then(data => this.regioes = data)
       .catch(error => console.log('Something want wrong!'));
  }

Finally just filter the information with that id:

getProdutosregiao(id_regiao) {
    return new Promise<Regiao[]>((resolve, reject) => {
      let sql = "SELECT NOM_PRODUTO, DESC_PRODUTO, VAL_PRODUTO, "+
        "DESC_DESCONTO, DESC_EXPERIENCIA, NOM_PATHIMAGEM, NOM_ENDERECO, NOM_COMPLEMENTO,"+
        "NOM_BAIRRO, NOM_CIDADE, COD_UF, NUM_CEP, DESC_FUNCIONAMENTO, NOM_PATHIMAGEM_DESC " +
      "FROM TB_PRODUTO WHERE REGIAO_ID="+id_regiao
      this.executeQuery(sql).then(data => {
        let regioes = [];
        data.forEach(function (row) {
          let regiao: Regiao = { nom_regiao: row[0] }
          regioes.push(regiao);
        });
        resolve(regioes);
      }).catch(error => {
        console.log(error);
      });
    });
  }