Good afternoon!

These days i've been working on a pokemon-based project.

My issue to solve right now is to be able to show the mat-options after clicking the its correspondant mat-select.

Functions to get the trainer names array and the pokemons array (on service.ts)

    getTrainersNames(): Observable<Array<string>>{
    return this.http.get<Trainer[]>(`${this.apiUrl1}`).pipe(
      map((entrenadores: Trainer[]) => {
        return entrenadores.map((entrenador: Trainer) => entrenador.fullName);
      })
    );
  }

  getPokemonsOfATrainer(nombreEntrenador: string): Observable<Array<Pokemon[]>> {
    return this.http.get<Trainer[]>(`${this.apiUrl1}?fullName=${nombreEntrenador}`).pipe(
      map((entrenadores: Trainer[]) => {
        return entrenadores.map((entrenador: Trainer) => entrenador.pokemons);
      })
    );
  }

Functions for subcribing to pokemons and trainer names and also for assign a trainer Name to the getPokemonsOfATrainer function (controller.ts)

// INSIDE ngOnInit
this.obtainData.getTrainersNames().subscribe({
      next: (nombres: string[]) => {
        this.trainerNames = nombres
      },
      error: (err: Error) => console.log('Hubo un error en el observable '),
      complete: () => {
        console.log('Observer got a complete notification')
      }, 
    });

    this.obtainData.getPokemonsOfATrainer(this.assignTrainerName()).subscribe( {
      next: (pokemones: Pokemon[][]) => this.pokemons = pokemones[0],
      error: (err: Error) => console.log('Hubo un error en el observable '),
      complete: () => console.log('Observer got a complete notification'), 
    });
// INSIDE ngAfterViewInit

  assignTrainerName() {
    // Get the selected value from the mat-select element
    const selectedValue = this.attacksForm.controls['trainerName'].value;

    // Check if the selected value is in the this.trainerNames array
    const selectedTrainer = this.trainerNames.find(name => name === selectedValue);

    console.log(selectedTrainer);

    // If the selected value is in the array, assign it to this.trainerName
    if (selectedTrainer) {
      this.trainerName = selectedTrainer;
    }

    return this.trainerName;
  }

And finally, the desired mat-select:

<!--INSIDE a form-->
    <mat-form-field appearance="standard">
        <mat-label>Selecciona un pokemon</mat-label>
        <mat-select matNativeControl formControlName="pokemonName" #matSelect>
          <mat-option *ngFor="let pokemon of pokemons" [value]="pokemon.name">
            {{pokemon.name}}
          </mat-option>
        </mat-select>
    </mat-form-field>

How could i show the mat-option values?

Thanks in advance!

CodePudding user response：

OnInit method of component

this.attacksForm.controls['trainerName'].valueChanges.subscribe((x)=>{
this.obtainData.getPokemonsOfATrainer(this.assignTrainerName()).subscribe( {
      next: (pokemones: Pokemon[][]) => this.pokemons = pokemones[0],
      error: (err: Error) => console.log('Hubo un error en el observable '),
      complete: () => console.log('Observer got a complete notification'), 
    });
})

add above line of code so, once value of trainerName change then getPokemonsOfATrainer called to get the data & set.