Select Option text in angular 2

Discussion in 'Web App and Programming' started by _16412, Jan 3, 2018.

  1. _16412

    _16412 Member

    Joined:
    Nov 23, 2017
    Messages:
    3
    Likes Received:
    0
    I have a select dropdown that has two values that i want to send to the component.
    I have searched online and found that i can store the ngFOr object in the [value] of an option.
    But when i use the (change)=myfunction($event.target.value) what comes over to the component is [object object]. Which i think is right. But I cant access the title or id values of this object. Why?

    Code Below:
    myForm.html

    <form>
    <input type="text" data="test" name="hasInput" #item />
    <select (change)="displayMyName($event.target.value)" #myName>
    <option id="test" *ngFor="let name of names" [ngValue]="name" >{{name.title}}</option>
    </select>


    <span>{{parameter}}</span>
    </form>


    myComponent.component.ts

    import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'hashValue',
    templateUrl: './hash-value-form-element.component.html',
    styleUrls: ['./hash-value-form-element.component.css']
    })
    export class HashValueFormElementComponent implements OnInit {


    names = [{title:'mike',id: 1},
    {title:'Anna',id: 2},
    {title:'Dinah',id: 3},
    {title:'Daphne',id: 4},
    {title:'MAtt',id:5}]

    parameter: any;

    constructor() { }

    ngOnInit() {
    // this.displayMyName()
    }

    displayMyName(myId: number){
    this.parameter = myId;
    console.log(this.parameter.title);
    console.log(this.parameter.name);
    }

    }
     
    #1
  2. Rakesh Deshpande

    Rakesh Deshpande Moderator
    Simplilearn Support

    Joined:
    May 3, 2016
    Messages:
    767
    Likes Received:
    60
    Hello,

    Suggestion 1 : Can you please share the object structure, if it is in JSON format then you can use JSON.parse('value') to get the values then use it. If it's not in JSON then, please check if you're using Input() and Output() to the values in the components.

    Suggestion 2: I would suggest you to check on the component codes where you are trying to display the values, here if you're trying to display the values from 1 component to the current viewing component then, you should make use of services and a defined method.

    Suggestion 3: Check the codes where the data is retrieved, Can you please the screenshot of the object displayed.
     
    #2
  3. _16412

    _16412 Member

    Joined:
    Nov 23, 2017
    Messages:
    3
    Likes Received:
    0
    my array is as follows:

    names = [
    {"id": 1, "title": "Anna"},
    {"id": 2, "title": "Mike"},
    {"id": 3, "title": "Dinah"},
    {"id": 4, "title": "Matt"}
    ]

    my select is not printing out an object even when I use ngValue.

    <select (change)="displayName($event.target.value)" #myName>
    <option id="test" *ngFor="let x of names" [ngValue]="x" >{{x.id}}</option>
    </select>

    if I console the typeof the object still comes out as string. Even though when printed it says [object object]

    displayName(myId:IhashValue){
    console.log(typeof myId);
    }

    if i print without typeof it reads the value of the option itself

    displayName(myId:IhashValue){
    console.log(myId); // prints 1,2,3, or 4
    }

    Is there something wrong with my ngValue - i tried [value] too - doesnt work either, please suggest
     
    #3
  4. Rakesh Deshpande

    Rakesh Deshpande Moderator
    Simplilearn Support

    Joined:
    May 3, 2016
    Messages:
    767
    Likes Received:
    60
    Hello ,

    The good looks fine. You can use the string interpolation to display the values. For e.g

    { { myid } } in the same component where the codes written. Hope this helps!!!
     
    #4

Share This Page