angular：无法使用@input getter和setter设置对象

Question

I am basically trying to convert the object to an array and bind it to kendo-dropdown control. When I do direct @Input bind, the dropdown binds but gives an error saying that data.map is not supported. Basically, the dropdown needs an array object. When I use the getter and setter property for @Input, I am getting fundclass as undefined. Could somebody tell me what the problem is

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 - Just to be clear, I have done a JSON.parse of the object during debugging just to show what the internal structure of the object looks like

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

Updated code and UI based on previous suggestions. The issue here is that I cant see the display values all i see is underlying value which is the value of the id

_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]}));
        }
      }

Markup

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

Answer 1

You are using this.fundclass which refers to object property so remove that this part to get the function argument.

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

---

You can even use Object.entries() method with Destructuring assignment to simplify your code.

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

---

UPDATE : Problem lies in the model binding you are using the same model while binding change it to something else, otherwise when you changing the value the selected value will be set as _fundclass property value but dropdown data should be an array.

Template :

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