1 votes

Angular list shows only [object Object].

I have a problem when displaying a select with several titles. I am working with angular and I do not handle it very perfectly since I have just started, what I have done is two databases, one of star wars episodes and another one of characters. An example would be

id:2 title: Return of the Jedi and the year of release.

And with the character I have his

id:1, name: Luke SkyWalker episode:2.

The character attribute episode:2 refers to the id of the episodes. And in the characters section I want to make a select where all the titles of the available episodes are shown so that when the user wants to add a character he can select this episode.

In the character typescript I make the Episodes import and make the following code:

ngOnInit(): void{
    this.ServeApi.obtenerPersonajes().subscribe((personajes: Personaje[]) => {
      this.lPersonajes = personajes;
      this.ServeApi.obtenerEpisodios().subscribe((episodios: Episodio[]) => {
        this.lEpisodio = episodio;
        var j=0;
        var i=0;
              if(this.lEpisodios[j].id == parseInt(this.lPersonajes[i].numEpisodio))
                this.lPersonajes[i].numEpisodio = this.lEpisodio[j].titulo;

And then in the html I do this :

<select class="custom-select" name="numEpisodio" [(ngModel)]=personajeSeleccionado.numEpisodio style="max-width: 30%;">
   <option *ngFor="let a of lPersonajes">{{ a }}</option>

But in the web selects it shows a lot of [object Object] and I don't know what it should be.


crrlos Points 416

In iteration:

<option *ngFor="let a of lPersonajes">{{ a }}</option>

The variable a is an object with several properties so you must choose which one you want to display, for example: {{ a.nombre }}


HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by: