时间戳

首页 > 解决方案 > Nativescript Angular NativeScriptUIDataForm：编辑器不起作用

angular - Nativescript Angular NativeScriptUIDataForm：编辑器不起作用

问题描述

亲爱的stackoverflow社区！

我正在开发一个 nativescript 角度项目，并且正在尝试使用 NativescriptUIDataform 插件。安装和实施确实有效。我得到了 NativescriptUIDataform 生成的表单。

包.json：

"nativescript-ui-dataform": "^3.7.0",

app.module.ts：

import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
...
@NgModule({
   ...
   imports: [
   ...
       NativeScriptUIDataFormModule
   ...

我的 newEntry.component.ts 看起来像这样：

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Entry } from "./entry";

@Component({
    selector: "newEntry",
    moduleId: module.id,
    templateUrl: "./newEntry.component.html"
})
export class NewEntryComponent implements OnInit {
    private _entry: Entry;

    constructor(private routerExtensions: RouterExtensions) {

    }

    get entry(): Entry {
        return this._entry;
    }

    set entry(value: Entry) {
        this._entry = value;
    }

    public goBack() {
        this.routerExtensions.backToPreviousPage();
    }

    ngOnInit() {

    }
}

在我的 newEntry.component.html 我有以下内容：

<RadDataForm [source]="entry" tkExampleTitle tkToggleNavButton></RadDataForm>

至此，没有出现任何问题。应用程序中会出现一个自动生成的表单。但是当我尝试使用 HTML 编辑器时，没有任何变化，只会出现自动生成的表单。我必须实现另一个模块吗？我在使用编辑器时做错了什么？

我的带有编辑器的 newEntry.component.html 如下所示：

<RadDataForm [source]="entry" tkExampleTitle tkToggleNavButton>
    <TKEntityProperty tkDataFormProperty name="date" displayName="Date" index="0"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="credit" displayName="Creditaccount" index="1" valuesProvider="something, something">
        <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="debit" displayName="Debitaccount" index="2" valuesProvider="something, something">
        <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="value" displayName="Value" index="3" type="number"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="description" displayName="Description" index="4"></TKEntityProperty>
</RadDataForm>

提前感谢您的回答！

标签： angularnativescriptnativescript-telerik-ui

解决方案

似乎您正在加载一个没有所有指令的模块。

app-routing-module.ts
...
{ path: "newEntry", loadChildren: "~/app/newEntry/newEntry.module#NewEntryModule" }
...

尝试导入NativeScriptUIDataFormModule到声明 NewEntryComponent (newEntry.module.ts) 的模块中，而不是app.module.ts

干杯

推荐阅读