Question

<kendo-autocomplete class="text-box" [data]="filterCustomer"[filterable]="true" (filterChange)="customerTextChange($event)" (valueChange)="onCustomerSelectionChange($event)" formControlName="customerId"[valueField]="'id'"[textField]="'name'">
    <ng-template kendoAutoCompleteItemTemplate kendoAutoCompleteValueTemplate let-dataItem>
        <span>[{{dataItem.account}}] {{ dataItem.name}}</span>
    </ng-template>
</kendo-autocomplete>

此代码中存在一个问题，不支持textField，因此根据id以自动完成方式绑定文本。

Answer 1

Kendo自动完成组件在textField元素上使用kendoAutoCompleteItemTemplate指令的ng-template的替代品有限。

通过kendoAutoCompleteItemTemplate指令，您可以定义数据项的外观以及希望它们在列表中显示的数据。

但是，一旦“自动完成”组件的列表关闭，则文本字段将显示所选项目的valueField值，并且无法立即更改此行为。

>

@Component({
    selector: 'my-app',
    template: `
        <kendo-autocomplete [data]="listItems"
                            [valueField]="'text'"
                            [placeholder]="'e.g. Andorra'"
                            (valueChange)="currentValue = $event">
            <ng-template kendoAutoCompleteItemTemplate let-dataItem>
                <span style="color: #00F;">{{ dataItem.value }}</span>
            </ng-template>
        </kendo-autocomplete>
    `
})
class AppComponent {
    public currentValue;

    public listItems: Array<{ text: string, value: string }> = [
        { text: "Albania", value: "Alb" },
        { text: "Andorra", value: "And" },
        { text: "Armenia", value: "Arm" },
        { text: "Austria", value: "Aus" },
        { text: "Azerbaijan", value: "Aze" }
    ];
}

在kendo anutocomplete中，绑定valueField和textField是否有其他选择？

1 个答案: