Angular Kendo-dropdownlist 错误 data.map 不是函数答案

【问题标题】：Angular Kendo-dropdownlist error data.map is not a functionAngular Kendo-dropdownlist 错误 data.map 不是函数
【发布时间】：2019-04-11 09:17:06
【问题描述】：

我在 Angular 7 应用程序中实现了一个 Kendo 下拉列表。我正在尝试将对象 FundClass 绑定到下拉列表。我将fundclass对象从父组件传递到子组件，并将该数据绑定到子组件中的下拉列表。数据确实被绑定并且可以在下拉控件中看到数据但是当我选择一个下拉项时，我收到以下错误

data.map is not a function
    at DropDownListComponent.push../node_modules/@progress/kendo-angular-dropdowns/dist/es/dropdownlist.component.js.DropDownListComponent.findDataItem (dropdownlist.component.js:949)

我绑定的数据的json结构

"[{"FundClassId":13714,"FundClass":"Class D"},{"FundClassId":13717,"FundClass":"Class B"},{"FundClassId":13713,"FundClass":"Class A"},{"FundClassId":13716,"FundClass":"Class B1"},{"FundClassId":13715,"FundClass":"Class C"}]"

父组件

这里的数据对象包含 FundClass 对象。

getManagerStrategyFunds() {
        this.strategyService.getManagerStrategyFunds(this.ManagerStrategyId, this.ValueDate)
            .subscribe((data: any) => {
                this.ViewModel = data;
               this.GridOptions.rowData = data.SummaryPerformance;
               this.FundPerformance = data.SummaryPerformance;
            },
            err => {
                this.Error = 'An error has occurred. Please contact BSG';
            },
            () => {
            });
    }

父组件 html。传递对象ftr.FundClass

 <div class="panel panel-default">
        <div class="panel-heading product-heading">
            <span style="font-size: 14px; font-weight: bold;">Performance Track Record and Statistics</span>
        </div>
        <div  *ngIf ="ViewModel.FundPerformance">
            <div class="panel-body" style="width:100%">
                <div *ngFor="let ftr of ViewModel.FundPerformance">
                    <fund-statistics [fundStatistics]="ftr.FundStatistics"  [fundTrackRecord]= "ftr.TrackRecord" [fundName]="ftr.FundName" 
                                     [benchMark1Name]="ftr.BenchmarkName1" [benchMark2Name]="ftr.BenchmarkName2" [fundclass]="ftr.FundClass" ></fund-statistics>
                </div>
            </div>
        </div>   
    </div>

子组件

@Input() fundclass: any;

    flashClassChanged(e) {

    }

Child compoenent html

 <kendo-dropdownlist style="width:170px" [data]="fundclass" [filterable]="false"
            [(ngModel)]="fundclass" textField="FundClass" (valueChange)="flashClassChanged($event)"
            valueField="FundClassId"></kendo-dropdownlist>

【问题讨论】：

标签： angular kendo-ui

【解决方案1】：

问题出在模型绑定中，您在绑定时使用了与元素相同的属性（用于数据）。否则将其更改为其他值，当您更改值时，所选值将设置为fundclass 属性值，但下拉数据应该是一个数组。在插件中，他们需要一个数组，而map 函数仅适用于数组，但当您选择更新为对象的值数据值时。

模板：

<kendo-dropdownlist style="width:170px" [data]="fundclass" [filterable]="false"
        [(ngModel)]="fundclassSelected" textField="FundClass" (valueChange)="flashClassChanged($event)"
        valueField="FundClassId"></kendo-dropdownlist>

TS :

@Input() fundclass: any;

fundclassSelected:any;

flashClassChanged(e) {

}

【讨论】：