Angular 2+ 的 Kendo UI - 组合框过滤器（在初始化时显示加载的信息）

Question

我正在从数据库中加载一条记录（组织），它（可能）有一个父（父 ID）；当我正在显示和编辑信息（使用与反应式表单相同的表单）时，我正在使用具有过滤功能的 kendo-dropdown；我正在加载它的初始状态（在 ngOnInit 上）。尽管在组合中正确设置了值，但不会出现文本。

component.html

<kendo-combobox
                    #orgParentId
                    formControlname="parentId"
                    [data]="organizationsLike"
                    [textField]="'name'"
                    [valueField]="'id'"
                    [filterable]="true"
                    (filterChange)="handleFilter($event)"
                    [placeholder]="'Search parent...'"
                    [suggest]="true"
                    [valuePrimitive]="true"
                    (selectionChange)="parentIdSelChanged($event)"
                >
           </kendo-combobox>

component.ts -> ngOnInit(): void

if (this.organization && this.organization.parentId) {
        this.organizationService.getOrganization(
            this.organization.parentId,
            r => this.organizationsLike = [r],
            null,
            () => {
                if (this.organizationsLike){
                    this.organizationForm.controls['parentId'].setValue(this.organizationsLike[0].id.toString());
                    // this.orgParentId.value = this.orgParentId.selected = this.organizationsLike[0].id;                         
                    // this.orgParentId.text = this.organizationsLike[0].name;
                    console.log('org like: ', this.orgParentId.text, this.orgParentId.value, this.organizationsLike[0].id, this.organizationForm.value);
                    // this.parentIdSelChanged(this.organizationsLike[0]);
                }
            }
        );
    }

我做错了什么？

Answer 1

只需将ngModel 添加到您的组合框

<kendo-combobox
    #orgParentId
    formControlname="parentId"
    [data]="organizationsLike"
    [textField]="'name'"
    [valueField]="'id'"
    [filterable]="true"
    (filterChange)="handleFilter($event)"
    [placeholder]="'Search parent...'"
    [suggest]="true"
    [valuePrimitive]="true"
    (selectionChange)="parentIdSelChanged($event)"
    [(ngModel)]="selectedOption">
</kendo-combobox>

并将模型设置为您的组合框选项之一

selectedOption = JSON.parse(JSON.stringify(this.organizationsLike[0]));

Demo - Plunkr

更新：基于 cmets，

如果您使用的是响应式表单，您只需将初始值指定为表单控件构造函数的第一个参数即可。

示例：

public listItems: string[] = [ {name: "option1", id: 1}, {name: "option2", id: 2}, {name: "option3", id: 3} ];
public sampleFormGroup: FormGroup = new FormGroup({
     myComboBox: new FormControl(this.listItems[0]) 
                               // ^^^^^^^^^^^^^^^^ INITIAL VALUE
});

您在此处指定的任何值最初都会显示在组合框中。

Demo - Plunk（使用反应形式）

希望对你有帮助