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

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

更新： 根据评论，

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

示例：

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（使用反应形式）

希望对您有所帮助

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

Kendo UI for Angular 2+ - combobox filter (display loaded information on init)

combobox

filter

kendo-ui-angular2

angular