Ion-select not displaying options directly

I have a select of regions, what I want is to click on "All Regions", and already show the list of regions = south zone, north zone etc. . . These regions are coming from the database. The problem is: When I click on all the regions, an option appears for me to click called "All regions" and after selecting this option, the zones appear. Can someone help me? I do not know what could be wrong.

Here'smycode:

HTML

<ion-itemno-linesclass="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);
  });

});


}