Kendo Dropdown with Angular 4

时间:2018-03-05 16:08:59

标签: angular kendo-ui kendo-ui-angular2

我在尝试使用Kendo UI为角度4向下拉列表中显示数据时遇到问题。我在这里有一些事情,如果我能看到我出错的地方会有很大的帮助。

首先我有我的api调用,它返回一个“name”和“number”列表,例如:

{
"name": "Fun Company",
"number": 9
},
{
"name": "Sad Company",
"number": 10
},

我的服务看起来像

@Injectable()
export class MembersListService {
  constructor(private http: Http) { }

  getMembersList(): Observable<MemembersList> {
    return this.http.get('Filtering/Members')
      .map(response => <MemembersList>response.json());
  }
}

我的component.ts

@Component({
  selector: 'foo'
  templateUrl: './foo.component.html',
})
export class fooComponent implements OnInit {
  getMembersList: MemembersList;
  constructor(
    private title: Title,
    private membersListService: MembersListService,
  ) {
    // page title
    this.title.setTitle('FooCompany| Foo Page');
   }

  ngOnInit() {

    // Member List
    this.getMembersList = new MemembersList();
    this.membersListService.getMembersList().subscribe(res => this.getMembersList = res);            
  }    
}

MemberList类是

export class MemembersList{
  name: string;
  number: number;
}

html看起来像

      <kendo-dropdownlist
        [data]="getMembersList"
        textField="name"
        valueField="number"
        [valuePrimitive]="true"
      >
      </kendo-dropdownlist>

1 个答案:

答案 0 :(得分:0)

Kendo Dropdownlist需要一个对象数组或原始数据(数据属性)

你的getMembersList成员变量是一个单独的对象。将它转换为MembersList数组,它应该没问题

请参阅Data Binding in Kendo DropDown list