Why are drop-down values ​​not used with Angular?

Question

Trying to bind data to a drop-down menu, but not bind anything, drop-down displays 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 try to debug the code, classificationTypes has the corresponding data, the same data that I used as a hard-coded value. It works great.

The getClassificationTypes method calls the API to retrieve data from the database.

I am writing this application using the ASP.NET Zero framework.

I tried the solution below. it is data binding to a drop-down list, but there is no automatic search function in the drop-down list, and it shows a simple drop-down list. and in the console it gives the 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 the console log, classificationTypes displayed as [classType, classType, classType, classType ]

Answer 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

You need to use the values ​​from the local variable classType inside ngFor, since this is an object. Answer below and replace your option below:

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

Answer 2

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

 [ngValue]="classType" 

classification.codeType must be assigned a value corresponding to one of classType . If classType is an object, it must be the same instance (another instance with the same contents is not enough). A custom comparison function allows you to have different instances.

Answer 3

Are you sure you are getting data from the database? Try using ng-repeat instead of ng-for ? Since the type of project (ASP.NET MVC 5.x and Angularjs 1.x) that I use uses ng-repeat .

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

Answer 4

An error occurred while returning data from the getClassificationTypes () method.

Here, "result" is a variable in your code that contains JSON with a key with the same name as "result". That way, the elements will look like result.result.items , but you only returned result.items that return undefine.

So your code should look like this (result.result.items) :

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

Answer 5

you need to console the result. You must receive the data as an object, for example {}. you need to get an array of data, for example []. let's say you get data like {data: [{}, {}]} something 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 gave a consolation value as {result:{items:[{ I assume you need to check the model for the result. before you get this data, the model must have the same structure for this data, otherwise you can write code like this.

 result['items'] 

and your result declaration should be result = {};

Answer 6

What about:

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