Encountering an issue with binding data to a dropdown element, as the dropdown 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:
Fetching classification types from the server: void {
//need to remove hard coding
this._commonService.getLookupItems(1, 6).subscribe((result) => {
this.classificationTypes= result.items;
});
}
Initializing on component load: void {
this.getClassificationTypes();
}
When debugging the code, classificationTypes contains valid data retrieved from the API.
The method getClassificationTypes fetches data from the database using an API call.
This application is being developed using the ASP.NET Zero framework.
An attempted solution successfully binds data to the dropdown, but disables the autocomplete feature which results in a simple dropdown. Additionally, a console error message is displayed.
Returning classification types from the server: 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 appears as
[classType, classType, classType, classType ]Response received from the 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}