Angular 4 的剑道下拉菜单答案

【问题标题】：Kendo Dropdown with Angular 4Angular 4 的剑道下拉菜单
【发布时间】：2018-03-05 16:08:59
【问题描述】：

我在尝试使用 Angular 4 的 Kendo UI 将数据呈现到下拉列表时遇到问题。我在这里发生了一些事情，如果我能看到哪里出错了，这将是很大的帮助。

首先我有我的 api 调用，它返回一个“名称”和“数字”列表，例如：

{
"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());
  }
}

我的组件.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>

【问题讨论】：

我不熟悉这个库，但您可能会使用异步管道和主题或可观察对象或 getMembersList 的东西。
我不确定我是否理解，如果我只是在不使用剑道的情况下对下拉菜单进行操作。
getMembersList 不是“静态的”。它的价值正在改变。所以变化应该是一个可观察的（例如BehaviorSubject）并且你应该向它发布值，并且像下拉菜单这样的订阅者可以知道这些值可能会通过使用异步管道而改变。
所以在这种情况下我应该将我的服务更改为这样的东西？ getMembersList(): BehaviorSubject { return this.http.get('Filtering/Members') .map(response => response.json());
textField="name" 应该是 [textField]="'name'" 和 valueField="number" 应该是 [valueField]="'number'"

标签： angular kendo-ui kendo-ui-angular2

【解决方案1】：

Kendo Dropdownlist 需要一个对象数组或原始数据（Data 属性）

您的 getMembersList 成员变量是单个对象。将其转换为MembersList数组应该没问题

见Data Binding in Kendo DropDown list

【讨论】：