加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

为什么Dropdown值不会使用Angular?

发布时间:2020-12-17 07:15:43 所属栏目:安全 来源:网络整理
导读:尝试将数据绑定到下拉列表,但不绑定任何内容,下拉列表显示 没有选择. select #classProductTypeCombobox name="classProductTypeCombobox" class="form-control col-md-3" [(ngModel)]="classification.codeType" [attr.data-live-search]="true" jq-plugin=
尝试将数据绑定到下拉列表,但不绑定任何内容,下拉列表显示
没有选择.

<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]

来自API的回复:

{"result":{"items":[{"taxonomyItemsId":4,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Sales"},{"taxonomyItemsId":5,"taxonomyItemLocDesc":"Administrative"},{"taxonomyItemsId":6,"taxonomyItemLocDesc":"Financial"},{"taxonomyItemsId":7,"taxonomyItemLocDesc":"Informative"}]},"targetUrl":null,"success":true,"error":null,"unAuthorizedRequest":false,"__abp":true}

解决方法

您需要在ngFor中使用classType局部变量中的值,因为它是对象.请在下面给出答案,并将您的选项替换为以下选项:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读