时间戳

首页 > 解决方案 > 角度：无法使用@input getter 和 setter 设置对象

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

问题描述

我基本上是在尝试将对象转换为数组并将其绑定到 kendo-dropdown 控件。当我直接进行@Input 绑定时，下拉列表会绑定，但会出现错误，指出不支持 data.map。基本上，下拉列表需要一个数组对象。当我为@Input 使用getter 和setter 属性时，我将fundclass 设置为未定义。有人可以告诉我问题是什么

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>

根据之前的建议更新了代码和 UI。这里的问题是我看不到显示值，我看到的只是基础值，即 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]}));
        }
      }

标记

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

标签： angular

解决方案

您正在使用this.fundclasswhich 引用对象属性，因此删除该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]}));
    }
}

推荐阅读