Displaying objects dropdown from an array - Angular

Issue

I need help with this implementation. Im have an array loaded with some objects, and i want to display only the property called "name" of those objects in the dropdown, and when i select one of those options, i want to have access to the entire object. Is that possible?

At the moment i tried this code:

HTML of the component:

<select (change)="update($event)">
    <option value="default">----</option>
    <option value={{item}} *ngFor="let item of noMensuales">
        {{item.nombre}}
    </option>
</select>

TS of the component:

import { Component, OnInit } from '@angular/core';
import { ServicesDebCredService } from 'src/app/services/services-deb-cred.service';

@Component({
  selector: 'app-pago-no-mensual',
  templateUrl: './pago-no-mensual.component.html',
  styleUrls: ['./pago-no-mensual.component.css']
})
export class PagoNoMensualComponent implements OnInit {
  noMensuales: any = []
  seleccionado:any = {}

  constructor(private _serviceDebCred: ServicesDebCredService) { }

  update(e : any) {
    this.seleccionado = e.target.value
    console.log(this.seleccionado)
    console.log(this.seleccionado.nombre)
  }

  ngOnInit(): void {
    this.getNoMensuales()
  }

  getNoMensuales() {
    this._serviceDebCred.getNoMensuales().subscribe((res) => {
      this.noMensuales = res.noMensuales
    })
  }

}

The thing is that, on the "seleccionado" field (the one i want to select and get the entire object) i have an empty object when i click on one of the list...

Solution

Yes it is possible, you need to tweak your code little bit, If you have an ID in your object just refer that pass that ID as value.

HTML file

<select (change)="update($event)">
    <option value="default">----</option>
    <option value={{item.id}} *ngFor="let item of noMensuales">
        {{item.nombre}}
    </option>
</select>

TS file: Into your update function:

update(e : any) {
    let selectedObject = {};
    this.noMensuales.map((res)=>{
     if(e.target.value == res.id){
       selectedObject = res;
     }
    });
    console.log(selectedObject)
  }

If you dont have ID or unique values in your object you can do it with ngFor index as well

Answered By - Swanand Taware