问题标签 [primeng]

以下是我安装 PrimeNG 的步骤：

1. npm install primeng --save npm install primeui --save

2. 更新Index.html：（我必须将目录primeng和primeui从 node_modules 复制到assets文件夹以摆脱 404 file not found错误）

   /li>

3. 更新test.component.ts：

   /li>

4. 更新test.component.html：

   /li>

结果：页面上没有显示任何内容。

我错过了什么吗？

编辑1：

1. 我现在认为重要的是说我使用angular-cli安装了项目
2. 如果我添加<p-calendar [(ngModel)]="dateValue"></p-calendar>到 test.component.html ，我会得到

   错误：未捕获（承诺）：无法分配给引用或变量！

编辑2：

我刚刚在另一个不使用 angular-cli 的项目中尝试过：

我一添加directives:[Calendar]就得到错误：

http://localhost:3000/primeng/primeng 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/primeng/primeng (...)

我正在使用 Angular2 rc.4 和 PrimeNg 1.0.0.beta.9，我收到了这个错误：

这发生在所有使用 [(ngComponent)] 的 PrimeNG 组件上，例如 p-dropdown 指令：

我已经关注了 Angular2 教程和 PrimeNG 展示，到目前为止一切正常，这是我遇到的第一个我无法解决的问题。

如果我只删除部分

即使使用我的项目列表，错误也不会出现并且组件正确显示。

在我的 component.ts 文件中，我像其他几个一样注入了指令：

我的问题与此类似： ngmodele-no-value-accessor-for

但在我的情况下，自定义组件来自第三方库（PrimeNG），我无法控制它

我刚开始使用 PrimeNG，在使用 inputtext 时遇到了一些问题。

I have a datatable with single selection and when a row is selected, a dialog is opened. 我试图在对话框中将选定对象的属性显示为 inputtext 值（我打算稍后实现编辑该对象，这就是我在 inputtext 中显示它的原因）。

我收到以下错误：

VM93567:77 类型错误：无法在 DebugAppView.AppView.detectChanges 处读取 DebugAppView._View_PetsComponent0.detectChangesInternal (PetsComponent.template.js:383:44) 处未定义的属性 'id'（在 ( http://localhost:8080/vendor. js:729:2 ), :234:14) 在 DebugAppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :339:44) 在 DebugAppView.AppView.detectViewChildrenChanges (eval在 ( http://localhost:8080/vendor.js:729:2 ), :260:19) 在 DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:96:8) 在 DebugAppView.AppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :234:14) 在 DebugAppView.detectChanges (eval at (http://localhost:8080/vendor.js:729:2 ), :339:44) 在 DebugAppView.AppView.detectViewChildrenChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), : 260:19) 在 DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.template.js:36:8) 在 DebugAppView.AppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :234 :14) 在 DebugAppView.detectChanges (eval at ( http://localhost:8080/vendor.js:729:2 ), :339:44) at ViewRef_.detectChanges (eval at ( http://localhost:8080/vendor .js:615:2 ), :124:65) 在 eval (eval at ( http://localhost:8080/vendor.js:291:2), :415:84) 在 Array.forEach (native) 在 ApplicationRef_.tick (eval at ( http://localhost:8080/vendor.js:291:2 ), :415:38) 在 ApplicationRef_。loadComponent (eval at ( http://localhost:8080/vendor.js:291:2 ), :386:14) at eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :373:19) 在 eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :344:26) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills .js:2780:2 ), :323:29) 在 Object.onInvoke (eval at ( http://localhost:8080/vendor.js:567:2 ), :46:41) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills.js:2780:2), :322:35) 在 Zone.run (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :216:44) 在 NgZoneImpl.runInner (eval at ( http://localhost :8080/vendor.js:567:2 ), :77:71) 在 NgZone.run (eval at ( http://localhost:8080/vendor.js:561:2 ), :228:66) 在 ApplicationRef。在 ApplicationRef_.bootstrap运行 (eval at ( http://localhost:8080/vendor.js:291:2 ), :342:14) (eval at ( http://localhost:8080/vendor.js:291:2 ), :364:21) 在 ZoneDelegate.invoke 的 eval (eval at ( http://localhost:8080/vendor.js:291:2 ), :148:50) (eval at ( http://localhost:8080 /polyfills.js:2780:2 ), :323:29) 在 Object.onInvoke (eval at (http://localhost:8080/vendor.js:567:2 ), :46:41) 在 ZoneDelegate.invoke (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :322: 35) 在 Zone.run (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :216:44) at eval (eval at ( http://localhost:8080/polyfills.js: 2780:2 ), :571:58) 在 ZoneDelegate.invokeTask (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :356:38) 在 Object.onInvokeTask (eval at ( http: //localhost:8080/vendor.js:567:2 ), :37:41) 在 ZoneDelegate.invokeTask (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :355:43)在 Zone.runTask (eval at ( http://localhost:8080/polyfills.js:2780:2), :256:48) 在 drainMicroTaskQueue (eval at ( http://localhost:8080/polyfills.js:2780:2 ), :474:36)

这是我的代码：

宠物类

}

零件

HTML 模板

如果我只是将一个对象绑定到一个输入文本，则没有错误，并且输入文本中有一个[Object object]值。所以我假设 Pet 对象的 'id' 字段没有被正确引用（selectedPet.id）。

那么，在对话框中获取所选行（显示对象的字段）的正确方法是什么？

假设我有一个看起来像这样的员工类：

假设我们的初始Employees 看起来像这样：

我们还可以假设有时员工会被雇用或解雇。类似这样的东西：

我想在PrimeNg 树中显示员工。

树小部件要求要显示的数据符合 treeNode 接口，如下所示：

主要问题：在不更改我的 Employee 类的情况下，将数据转换为 TreeNode 的最佳方法是什么？

我正在考虑的事情：

• 当我添加一个新员工时，我想保持我的树状态（什么是打开的，什么是选中的，等等）
• 我需要能够轻松检索当前选择的员工。
• 我试图避免维护两个重复的模型。
• 我想以一种合理但可扩展的方式利用 Angular2 的变更检测

这是我的 EmployeeTree 组件目前的样子：

选项 1 - 创建一个将 Employee 转换为 TreeNode 的管道

我想这会让我的模板看起来像这样：

我将创建一个执行以下操作的管道：

优点缺点：

• 这利用了角度的变化检测
• 如果这是一个纯管道，它可能会错过更改
• 如果这是不纯的管道，它可能太重了
• 使组件非常干净并将责任委托给管道
• 不确定添加新项目时这是否会保留我的 gui 状态（选择什么以及打开/关闭什么）

选项 2 - 在组件内部为树维护一个单独的结构

我认为我可以让 Employee 发出一个事件，该事件在它发生变化时会溢出。这可以让我有所收获。

一般来说，使用Angular2做这样的事情的最好方法是什么。

总而言之，我想使用一个小部件，它期望数据的格式与我存储它的格式略有不同。将我的数据按摩到小部件中的标准 angular2 方法是什么？有特殊的 angular2 酱汁可以帮助我吗？我应该维护两个独立的模型吗？我的树中可能有 100 或 1000 件物品，所以我有点担心性能。

我正在使用 Primeng 的 dataTable 但找不到如何将 HTML 代码设置为标题的值。

我必须设置表的第一个标题是复选框/收音机，但我只能使用header属性添加文本p-column

我知道 Datatable 中的模板。这个怎么用？

在这里我想设置复选框而不是标题中的文本（第一行）

任何想法 ？

如果我们可以禁用带有 disabled 属性的 primeNG 编辑器框，那就太好了，类似于 textarea 可用的功能：

但遗憾的是，这不起作用。您对如何使用 p-editor（primeNG 编辑器）执行此操作有任何想法吗？

再会。我想创建一个简单的tabmenu，就像primeng教程一样，我只想显示它。但我得到“没有路由器提供商！” 例外。这个带有 tabmenu 的 us 组件：

我在启动时声明了 ROUTER_PROVIDERS：bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, AUTH_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy} )] );

我只是想将下拉菜单中的数据与ngModel. 当应用程序加载时我收到一个错误，这是有道理的。

这使我相信该错误源于ngModel应用程序加载时最初未与任何数据绑定的事实。

我不是最擅长使用 Observables ......所以要小心。

部分 html 下拉列表

相关 TypeScript（排除导入）

因此，当应用程序最初加载时，action它是空的。我希望绑定到的空值ngModel不会破坏应用程序，但也许我误解了错误。最终，我希望绑定所选项目，并且我认为克服此错误将使我达到这一点。

我想在我的应用程序中使用PrimeNG 日历。当我运行代码时，我收到错误：

ReferenceError：未定义 jQuery。

其他 PrimeNG 指令工作正常。如果我删除<p-calendar>错误消失。

我已在我的应用程序中导入并包含日历。顺便说一句，我使用的是最新版本的 angular、router 和 forms。在此之前，我遇到了这个问题并通过更新表单提供程序来修复它。

堆栈跟踪摘录：

ReferenceError：在DebugAppView._View_AddShipmentComponent0.detectChangesInternal (AddShipmentComponent.template.js :930:59) 在 DebugAppView.AppView.detectChanges (eval at ( http://localhost:8080/js/vendor.js:716:2 ), :243:14) at DebugAppView.detectChanges (eval at ( http:// /localhost:8080/js/vendor.js:716:2 ), :348:44)

我有一个奇怪的错误，我使用 PrimeNG 在我的应用程序中显示 DatePicker。当我尝试使用 bootstrap'sform-control时，我得到一个视觉错误。

这是我的模板：

这是结果：

编辑

如果有任何帮助，这里是生成的 HTML：