Question

尝试将数据绑定到下拉列表，但不绑定任何内容，下拉列表显示 没有选择。

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

当我尝试调试代码时，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

如果classType是对象，则需要使用[ngValue]。 [value] 仅适用于字符串值

[ngValue]="classType"

classification.codeType需要指定一个与classType之一匹配的值。如果classType是一个对象，它必须是完全相同的实例（具有相同内容的不同实例是不够的）。自定义比较器功能允许具有不同的实例。

Answer 2

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

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

Answer 3

您是否确保从数据库中获取数据？

您是否尝试使用ng-repeat代替ng-for？因为我使用的项目类型（ASP.NET MVC 5.x＆amp; Angularjs 1.x）正在使用ng-repeat。

您可以转到此website并选择项目类型，了解它们的实施方式ng-repeat

Answer 4

从getClassificationTypes()方法返回数据时出错。

此处“结果”在您的代码中是可变的，其中包含具有相同名称“结果”的密钥的JSON。

所以项目会像 result.result.items 一样检索，但您只返回 result.items ，返回undefined。

所以你的代码应该如下（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

您需要控制结果。你必须得到像{}这样的对象类型的数据。你需要获得像[]这样的数组形式的数据。假设您收到的数据为{data：[{}，{}]}。然后在代码中执行以下操作

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

    });
}

因为您已将安慰值设为{result:{items:[{，我假设您需要检查模型的结果。在获得此数据之前，模型应该具有与此数据相同的结构，否则您可以像这样编写代码。

result['items']

您的结果声明应为result = {};

Answer 6

怎么样：

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

为什么Dropdown值不会使用Angular？

6 个答案: