CODEWITHSUNDEEP
angulartypescriptangular2-template
Vivek Nuna
Vivek Nuna

Reputation: 1

Why Dropdown values not coming using Angular?

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}

Upvotes: 5

Views: 2004

Answers (6)

Arun Saini
Arun Saini

Reputation: 7804

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;
    });
}

Upvotes: 2

Rohan Fating
Rohan Fating

Reputation: 2133

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>

Upvotes: 3

Guntram
Guntram

Reputation: 980

What about:

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

Upvotes: 0

Sunil Kumar
Sunil Kumar

Reputation: 849

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 = {};

Upvotes: 1

Kenny Eng
Kenny Eng

Reputation: 149

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

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

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.

Upvotes: 4

Related Questions