为什么Dropdown值不会使用Angular？

Question

尝试将数据绑定到下拉列表,但不绑定任何内容,下拉列表显示 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>

角度代码:

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

    });
}

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

当我尝试调试代码时,classificationTypes有适当的数据,我用作硬编码值的相同数据.它工作正常.

方法getClassificationTypes是调用API从数据库中获取数据.

我正在使用ASP.NET Zero框架编写此应用程序.

我尝试了以下解决方案.这是将数据绑定到下拉列表,但是下拉列表的自动搜索功能已经消失,它显示简单的下拉列表.并在控制台中,它提供以下错误消息.

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

在控制台日志classificationTypes中显示为[classType, classType, classType, classType ]

来自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

您需要使用 ngFor 内的 classType 局部变量的值，因为它是对象。请参考下面的答案并将您的选项替换为以下选项：

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