kendo-ui - 在 kendo anutocomplete 中是否有任何替代方法用于绑定 valueField 和 textField

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 is not supported 所以根据 id 在自动完成中绑定文本。

Answer 1

Kendo AutoComplete 组件有一个有限的替代方案，即在元素上textField使用kendoAutoCompleteItemTemplate指令。ng-template

该kendoAutoCompleteItemTemplate指令允许您定义希望数据项的外观以及希望它们在列表中显示的数据。

但是，一旦关闭 AutoComplete 组件的列表，文本字段将显示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" }
    ];
}