#angular #kendo-ui
#angular #kendo-пользовательский интерфейс
Вопрос:
Я внедряю выпадающий список Kendo в приложение angular 7. Я пытаюсь привязать объект 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>
Ответ №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) {
}