angular - Kendo-UI Angular 无法绑定到值

Question

我使用 Angular 9 和 Kendo-UI 作为我的 UI 框架。我想构建一个动态表单构建器，简要介绍一下，但老实说，它的 Kendo-UI 实现看起来是事后的想法。

我所做的是创建一个充当基本输入的接口，然后创建一组扩展基本输入的接口，这些接口具有基于 API 文档的所有相应输入（例如TextBoxComponent）。例如，这是与IBaseInput接口一起的ITextBox接口：

export interface IBaseInput {
    FormControlName: string;
    Label?: string;
    // tslint:disable-next-line: max-line-length
    Type: 'autocomplete' | 'calendar' | 'checkbox' | 'colorgradient' | 'colorpalette' | 'colorpicker' | 'combobox' | 'datepicker' | 'dropdownlist' | 'dropdowntree' | 'maskedtextbox' | 'multiselect' | 'numerictextbox' | 'radiobutton' | 'rangeslider' | 'rangeslider' | 'slider' | 'switch' | 'textarea' | 'textbox';
}

export interface ITextBox extends IBaseInput {
    ClearButton?: boolean;
    ClearButtonIcon?: string;
    Disabled?: boolean;
    ErrorIcon?: string;
    MaxLength?: number;
    Placeholder?: string;
    ReadOnly?: boolean;
    SelectOnFocus?: boolean;
    ShowErrorIcon?: 'initial' | boolean;
    ShowSuccessIcon?: 'initial' | boolean;
    SuccessIcon?: string;
    TabIndex?: number;
    Title?: string;
    Value?: string;
    Blur?: (e: any) => void;
    InputBlur?: (e: any) => void;
    InputFocus?: (e: any) => void;
    Focus?: (e: any) => void;
    ValueChange?: (e: string) => void;
}

然后在我的模板中，我尝试构建表单域、标签和控件。例如，这是文本框的代码：

<kendo-formfield *ngSwitchCase="'textbox'">
    <kendo-label text="{{control.Label ? control.Label : control.FormControlName}}"></kendo-label>
    <kendo-textbox [clearButton]="control.ClearButton"
                   [clearButtonIcon]="control.ClearButtonIcon"
                   [disabled]="control.Disabled"
                   [errorIcon]="control.ErrorIcon"
                   [formControlName]="control.Format"
                   [maxLength]="control.MaxLength"
                   [placeholder]="control.Placeholder"
                   [readOnly]="control.ReadOnly"
                   [selectOnFocus]="control.SelectOnFocus"
                   [showErrorIcon]="control.ShowErrorIcon"
                   [showSuccessIcon]="control.ShowSuccessIcon"
                   [tabIndex]="control.TabIndex"
                   [title]="control.Title"
                   [value]="control.Value"
                   (blur)="control.Blur ? control.Blur($event) : null"
                   (inputBlur)="control.InputBlur ? control.InputBlur($event) : null"
                   (inputFocus)="control.InputFocus ? control.InputFocus($event) : null"
                   (focus)="control.Focus ? control.Focus($event) : null"
                   (valueChange)="control.ValueChange ? control.ValueChange($event) : null"></kendo-textbox>
</kendo-formfield>

我遇到的问题是几乎每个组件在构建 Angular 项目时都会抛出错误，说它无法绑定。例如：

• 无法绑定到“clearButton”，因为它不是“kendo-textbox”的已知属性。
• 无法绑定到“clearButtonIcon”，因为它不是“kendo-textbox”的已知属性。
• 无法绑定到“禁用”，因为它不是“kendo-textbox”的已知属性。
• ETC...

所以我立即检查了我的模块，我有适当的导入：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { CommonModule } from '@angular/common';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { IntlModule } from '@progress/kendo-angular-intl';
import { LabelModule } from '@progress/kendo-angular-label';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { NgModule } from '@angular/core';
import { FormComponent } from './form.component';

@NgModule({
    declarations: [
        FormComponent
    ],
    imports: [
        BrowserAnimationsModule,
        BrowserModule,
        ButtonsModule,
        CommonModule,
        DateInputsModule,
        DropDownsModule,
        FormsModule,
        InputsModule,
        IntlModule,
        LabelModule,
        LayoutModule,
        ReactiveFormsModule
    ],
    exports: [
        FormComponent
    ]
})
export class FormModule { }

由于我有适当的进口，我不确定是什么原因造成的。对于它的价值，这是我对 kendo-angular-inputs 的 package.json 依赖项：

"@progress/kendo-angular-inputs": "^6.0.0"

更新

查看目录textbox.directive.d.ts中的@progress/kendo-angular-inputs/dist/es2015/textbox，似乎唯一的输入是id. 这是 API 文档与实际实现不一致的情况吗？

标签： angularkendo-ui