Блог

Я в основном пытаюсь преобразовать объект в массив и привязать его к раскрывающемуся элементу управления kendo. Когда я выполняю прямую привязку @Input, выпадающий список привязывается, но выдает сообщение об ошибке, в котором говорится, что data.map не поддерживается. В принципе, для выпадающего списка требуется объект array. Когда я использую свойство getter и setter для @Input, я получаю fundclass как undefined . Может кто-нибудь сказать мне, в чем проблема

 get fundclass(): any {
    return this._fundclass;
}

@Input()
set fundclass(fundclass: any) {
    if (this.fundclass !== undefined ) {
        this._fundclass =  Object.keys(this.fundclass).map(key => ({type: key, value: this.fundclass[key]}));
    }
}
  

JSON — Просто для ясности, я выполнил JSON.parse объекта во время отладки, просто чтобы показать, как выглядит внутренняя структура объекта

 "[{"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"}]"
  

HTML

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

Обновленный код и пользовательский интерфейс на основе предыдущих предложений. Проблема здесь в том, что я не могу видеть отображаемые значения, все, что я вижу, — это базовое значение, которое является значением идентификатора

 _fundclass: any;

      get fundclass(): any {
        return this._fundclass;
      }

      @Input()
      set fundclass(fundclass: any) {
        if (fundclass !== undefined ) {
         this._fundclass =  Object.keys(fundclass).map(key => ({text: key, value: fundclass[key]}));
        }
      }
  

Разметка

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

Вы используете this.fundclass which ссылается на свойство объекта, поэтому удалите эту this часть, чтобы получить аргумент функции.

 @Input()
set fundclass(fundclass: any) {
  if (fundclass !== undefined ) {
  //--^^^^^^^^--- here
     this._fundclass =  Object.keys(fundclass).map(key => ({text: key, value: fundclass[key]}));
     // ---------------------------^^^^^^^^^^^---------------------------------^^^^^^^^^^^^^^^----- here
  }
}
  

Вы даже можете использовать Object.entries() метод с деструктурирующим назначением, чтобы упростить свой код.

 @Input()
set fundclass(fundclass: any) {
  if (fundclass !== undefined ) {
     this._fundclass =  Object.entries(fundclass).map(([text, value]) => ({text, value}));
  }
}
  

ОБНОВЛЕНИЕ: проблема заключается в привязке модели, в которой вы используете ту же модель при привязке, измените ее на что-то другое, иначе при изменении значения выбранное значение будет установлено как _fundclass значение свойства, но выпадающие данные должны быть массивом.

Шаблон :

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

TS :

 _fundclass:any;
fundclass1:any;

get fundclass(): any {
    return this._fundclass;
}

@Input()
set fundclass(fundclass: any) {
    if (this.fundclass !== undefined ) {
        this._fundclass =  Object.keys(this.fundclass).map(key => ({type: key, value: this.fundclass[key]}));
    }
}