Ion-select не отображает параметры напрямую

Question

У меня есть выбор регионов, и мне нужно щелкнуть «Todas as Regioes» и показать список регионов = южная зона, северная зона и т. Д. Эти регионы взяты из базы данных. Проблема заключается в следующем: когда я нажимаю на все регионы, появляется опция «Todas as regioes», и после выбора этой опции появляются зоны. Кто-нибудь может мне помочь? Я не знаю, что может быть не так.

img1 img2 img3

Вот мой код:

HTML

 <ion-item no-lines class="setaselect">
  <ion-label>
    <ion-select interface="popover" (ionChange)="selecionaregiao()" [(ngModel)]="regiao" class="optselect"  padding>

      <ion-option value="regiao" selected>TODAS AS REGIÕES </ion-option>  
      <ion-option  *ngFor="let regiao of regioes">{{regiao.nom_regiao}}</ion-option>

    </ion-select>
  </ion-label>
</ion-item>

TS

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

DATABASET.TS

getRegiao(){

return new Promise<Regiao[]>((resolve, reject) => { 

  let sql = "SELECT NOM_REGIAO FROM TB_REGIAO";
  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);
  });

});


}