Why Dropdown values not coming using Angular?

Question

Trying to bind data to dropdown, but not binding anything, dropdown displayes NOTHING SELECTED.

<select #classProductTypeCombobox 
        name="classProductTypeCombobox" 
        class="form-control col-md-3" 
        [(ngModel)]="classification.codeType"
        [attr.data-live-search]="true" 
        jq-plugin="selectpicker" 
        required>
    <option *ngFor="let classType of classificationTypes" 
            [value]="classType">{{classType}}</option>
</select>

Angular Code:

getClassificationTypes(): void {
    //need to remove hard coding
    this._commonService.getLookupItems(1, 6).subscribe((result) => {
        this.classificationTypes= result.items;

    });
}

ngOnInit(): void {
    this.getClassificationTypes();
}

When I'm trying to debug code, classificationTypes has proper data, same data I have used as hardcoded value. it works fine.

method getClassificationTypes is calling API to get data from database.

I'm writing this application using ASP.NET Zero framework.

I have tried the below solution. this is binding data to dropdown, but autosearch functionality of dropdown is gone, its showing simple dropdown. and in console it gives following error message.

getClassificationTypes(): any {
    return this._commonService.getLookupItems(2, 6).subscribe((result) => {
        console.log(result.items)
        return this.classificationTypes = result.items;
    });
}

classificationTypes: TaxonomyItemsLocDto[] = this.getClassificationTypes();


ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

in console log classificationTypes is showing as [classType, classType, classType, classType ]

Response from API:

{"result":{"items":[{"taxonomyItemsId":4,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Sales"},{"taxonomyItemsId":5,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Administrative"},{"taxonomyItemsId":6,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Financial"},{"taxonomyItemsId":7,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Informative"}]},"targetUrl":null,"success":true,"error":null,"unAuthorizedRequest":false,"__abp":true}

Günter Zöchbauer · Accepted Answer · 2017-08-29 16:52:35Z

4

If classType is an object, you need to use [ngValue] instead. [value] only works for string values

[ngValue]="classType"

classification.codeType needs to have a value assigned that matches one of classType. If classType is an object, it has to be the exact same instance (a different instance with the same content is not enough). A custom comparer function allows to have different instances.

answered Aug 29, 2017 at 16:52

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan Fating · Accepted Answer · 2017-09-06 15:31:39Z

3

+25

You need to use values from your classType local variable inside ngFor since it is object. Please refere below answer and replace your option with below one:

<option *ngFor="let classType of classificationTypes" [value]="classType.taxonomyItemsId">{{classType.taxonomyItemLocDesc}}</option>

answered Sep 6, 2017 at 15:31

Rohan Fating

2,13317 silver badges24 bronze badges

Comments

Kenny Eng · Accepted Answer · 2017-09-05 05:27:49Z

2

Have you make sure that you're getting the data from database?

Have you try using ng-repeat instead of ng-for? Because the project type (ASP.NET MVC 5.x & Angularjs 1.x) that I'm using is using ng-repeat.

You can go to this website and select your project type to see how they implement ng-repeat

answered Sep 5, 2017 at 5:27

Kenny Eng

14910 bronze badges

2 Comments

Vivek Nuna Over a year ago

my project type is ASP.NET Core & Angular

Kenny Eng Over a year ago

Sorry dude, I think I'm not able to help you. Because I'm not learning about ASP.NET core yet.

marc_s · Accepted Answer · 2018-07-16 04:33:21Z

2

There is a mistake in returning data from getClassificationTypes() method.

Here the "result" is variable in your code which contains JSON having a key with the same name "result".

So items will retrieve like result.result.items, but you have returned just result.items which returns undefined.

So your code should be as follows (result.result.items):

getClassificationTypes(): any {
    return this._commonService.getLookupItems(2, 6).subscribe((result) => {
        console.log(result.items)
        return this.classificationTypes = result.result.items;
    });
}

edited Jul 16, 2018 at 4:33

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 5, 2017 at 10:01

Arun Saini

7,9641 gold badge24 silver badges26 bronze badges

Comments

Sunil Kumar · Accepted Answer · 2017-09-05 07:37:42Z

1

you need to console the result. you must be getting a data in object type like {}. you need to get the array form of data like []. say you are getting the data as {data:[{},{}]} some thing like this. then you do the following in your code

getClassificationTypes(): void {
    //need to remove hard coding
    this._commonService.getLookupItems(1, 6).subscribe((result) => {
        this.classificationTypes= result.items['data'];

    });
}

since you have given the consoled value as {result:{items:[{ I assume that you need to check with model for result. before you get this data the model should have the same structure of this data otherwise you can write the code like this.

result['items']

and your declaration of result should be result = {};

edited Sep 5, 2017 at 7:37

answered Sep 5, 2017 at 7:06

Sunil Kumar

8698 silver badges18 bronze badges

Comments

Guntram · Accepted Answer · 2017-09-06 13:25:30Z

0

What about:

<option *ngFor="let classType of classificationTypes" [value]="'' + classType.taxonomyItemsId">{{classType.taxonomyItemLocDesc}}</option>

answered Sep 6, 2017 at 13:25

Guntram

98015 silver badges20 bronze badges

Collectives™ on Stack Overflow

Why Dropdown values not coming using Angular?

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related