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}

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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