为什么下拉值不使用 Angular？答案

【问题标题】：Why Dropdown values not coming using Angular?为什么下拉值不使用 Angular？
【发布时间】：2018-07-16 12:33:21
【问题描述】：

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

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

【问题讨论】：

标签： angular typescript angular2-template

【解决方案1】：

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

[ngValue]="classType"

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

您是否尝试过使用ng-repeat 而不是ng-for？因为我使用的项目类型（ASP.NET MVC 5.x & Angularjs 1.x）使用的是ng-repeat。

你可以去这个website并选择你的项目类型，看看他们是如何实现ng-repeat的

【讨论】：

我的项目类型是 ASP.NET Core & Angular
对不起，伙计，我想我无法为您提供帮助。因为我还没有学习 ASP.NET 核心。

【解决方案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;
    });
}

【讨论】：

【解决方案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 = {};

【讨论】：

【解决方案6】：

怎么样：

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

【讨论】：