Create a second dynamic ion-select

Ionic Framework Ionic Vue
1

good afternoon, i’m trying to create two ion-select, in which the second presents only the information of the option selected in the first ion-select

.html

  <ion-item>
    <ion-label> {{servicoDesejado}} </ion-label>
    <ion-select [(ngModel)]="selectedVal" (ionChange)="selectServicoDesejado($evento)">
      <ion-select-option *ngFor="let servico of servicos" [value]="servico.id">
        {{servico.name}}
      </ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>{{profissionalServico}}</ion-label>
    <ion-select id='profissional' [(ngModel)]="selectedVal2" disable={{isEnabled}}>
      <ion-select-option *ngFor="let profissional of profissionais" [value]=
      "profissional.id"> {{profissional.profession.prof}} </ion-select-option>
    </ion-select>
  </ion-item>

.ts

export class AgendarPage implements OnInit {
  
  public servicoDesejado = "Serviço Desejado";
  public profissionalServico = "Profissional";
  selectedVal2:Number=103;
  servicos:any[]=[];
  profissionais:any[]=[];

  constructor(public navegacao: NavController, private platform: Platform) { 
    this.platform.ready().then(()=> {
      this.servicos = [{
        name: "Cor", 
        profession: [{
          prof: "Azul"},{
          prof: "Amarelo"},{
          prof: "Vermelho"
        }],
      }, {
        name: "Roupa"
      }, {
        name: "Número"
      }, {
        name: "Letra"
      }];
    })  
  }
}