Есть ли альтернатива в кендо анутозаполнение для связывания valueField и textField - PullRequest
Новая
       13

Есть ли альтернатива в кендо анутозаполнение для связывания valueField и textField

0 голосов
/ 18 марта 2019 
<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.

1 Ответ

0 голосов
/ 19 марта 2019

Компонент Kendo AutoComplete имеет ограниченную альтернативу для 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" }
    ];
}
...