标签: primeng

我正在尝试使用PrimeNG制作菜单栏,基于http://www.primefaces.org/primeng/#/menubar的示例

我创建这样的东西:

app.component.ts

import {Component} from '@angular/core';
import {MenuBarComponent} from "./menubardemo.component";
@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1><demo></demo>`,
  directives:[MenuBarComponent] })
export class AppComponent { }

menubardemo.components.ts

import {Component, OnInit} from "@angular/core";
import {Menubar, MenuItem} from "primeng/primeng";
@Component({
  selector: 'demo',
  template: `<p-menubar [model]="items"> </p-menubar>`,
  directives: [Menubar] })
export class MenuBarComponent implements OnInit {
  private items:MenuItem[];// you know how to fill this in the "OnInit" method

  ngOnInit() {
    this.items = [
      {
        label: 'File',
        icon: 'fa-file-o',
        items: [{ …

嗨,我刚刚开始使用角度2.我发现这个库PrimeNG,我遵循了这个教程:http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2 它一切正常,除了风格.他们不是以某种方式申请,我真的不知道该怎么做.这是我的表的样子:

<div class="content-wrapper fullscreen-override">
<section class="content-header">
<H1>Users</H1>
</section>

<section class="content">
<div class="row col-lg-10 center">
<div class="box box-primary"> 
<p-dataTable [(value)]="users" selectionMode="single" [(selection)]="selectedUser" (onRowSelect)="onRowSelect($event)" rows="5" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [responsive]="true">

    <p-column field="email" header="email" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="first_name" header="first_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="last_name" header="last_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="is_superuser" header="is_superuser" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>

    <footer>
        <div class="ui-helper-clearfix" style="width:100%">
            <button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
            <button type="button" pButton icon="fa-pencil-square-o" style="float:left" (click)="showDialogToEdit()" [disabled]="selectedUser == null" label="Edit"></button>
            <button type="button" pButton icon="fa-close" …

我是Angular 2\4中的新手,我正在尝试按照这个快速视频教程将PrimeNG组件添加到我的Angular项目中:

https://www.youtube.com/watch?v=6Nvze0dhzkE

以及PrimeNG教程页面的入门部分:https://www.primefaces.org/primeng/#/setup

所以这是我的app.component.html看法:

<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
</div>

<p-calendar [(ngModel)]="value"></p-calendar>

{{value | date:'dd.mm.yyy'}}

如您所见,我已插入此标记以显示日历组件:

<p-calendar [(ngModel)]="value"></p-calendar>

(如该组件的官方文档所示:https://www.primefaces.org/primeng/#/calendar)

这里我有第一个问题因为IntelliJ给我这个错误信息:

Error:(9, 13) Angular: Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is …

我有使用 PrimeNg p-dropdown 的组件。
html代码：

<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port">
</p-dropdown>

ts portNames 声明：

portNames: string[] =["Port 01","Port 02", "Port 03"];

我的问题是 DropDown 不显示值“端口 01”、“端口 02”、“端口 03”。

也许我有什么错误？

我在 angular.json 样式数组中包含了一些样式，如下所示：

 "styles": [
              "src/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/omega/theme.css",
              "node_modules/primeng/resources/themes/bootstrap/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ]

但它不是选择样式，因为我看不到primeng 表样式和其他样式。虽然如果我在我的 styles.css 文件中导入样式，它会正常工作，如下所示：

@import '../node_modules/primeng/resources/themes/omega/theme.css';
 @import '../node_modules/primeng/resources/themes/bootstrap/theme.css';
 @import '../node_modules/primeicons/primeicons.css'

我相信我们可以使用上述任何方法，如果这不正确，请告诉我。

我也多次重新启动 ng serve。

任何帮助表示赞赏。感谢期待。

我正在使用 angular 6，因为它在 angular.json 中很明显，如果需要共享任何其他代码或信息，也请告诉我。

我正在使用PrimeNG具有自定义筛选和启用虚拟滚动功能的下拉组件。

我发现重新打开该组件时，它没有滚动回到视图列表中的最后一个选择，而是仅滚动回到列表的顶部，这意味着您必须进行物理滚动才能找到所做的选择。

看到这个例子stackblitz

我确实在这里遇到了一个解决方案，该解决方案涉及调用scrollToIndexCdkVirtualScrollViewport实例，这听起来像对我有用。但是，当我尝试将其合并到代码中时，实例变量显示为未定义。

有谁知道这里的正确方法？我正在使用PrimeNG 7.1.3。

谢谢

我在菜单栏中使用PrimeNG 7.1.3。当前，它们具有autoDisplay: true(for mouse enter) or false(for mouse click)子菜单在鼠标输入或单击时显示的属性。但是，在使用点击时，并不会保持这种状态。

因此，最初，该子菜单不会在鼠标悬停时显示，但是当我单击时，该子菜单会显示，但是当我将鼠标悬停在另一个菜单项上时，该子菜单会隐藏（这是我不想要的）。我希望子菜单保持显示状态，即使我将鼠标悬停在另一个菜单项上也是如此。我怎样才能做到这一点？

代码（来自教程）：

app.component.html

<p-menubar [model]="items" [autoDisplay]="false">
</p-menubar>

app.component.ts

export class AppComponent implements OnInit {
  title = 'MockMenuBar2';
  items: MenuItem[];

  ngOnInit() {
    this.items = [
      ...
    ];
  }
}

输出：

任何线索都将有所帮助。我只是不想在将鼠标悬停在其他菜单项上时隐藏子菜单。

我正在使用Angular 7和构建网站PrimeNG 8。顶部有固定标题，左侧有侧边栏导航菜单的网页布局。

我的预期行为是当侧边栏切换时，它不会隐藏标题，并且内容也会向右移动。

我检查了primeng文档，但没有提供这样的功能。 https://www.primefaces.org/primeng/#/sidebar

目前,我正在为新的Angular 2项目使用UI-Libraries.我试过Ng-Bootstrap和Material.不幸的是,他们仍处于Alpha和Beta状态.我还检查了PrimeNG.目前,PrimeNG提供了比Material和NgBootstrap更多的组件.尤其是在桌子方面.PrimeNG似乎很稳定,可以用于生产.

我对PrimeNG的网格系统并不满意.例如,不清楚如何执行列偏移.我在文档(https://www.primefaces.org/primeng/#/grid)中也找不到这个.

我开始在PrimeNG组件中使用bootstrap 4.对我来说,这还不是一个好方法.感觉就像我有两个框架在某些情况下做同样的事情.例如,如果我想创建一个按钮,我可以使用bootstrap类来执行以下操作

<button class="btn btn-primary">Button with Bootstrap</button>

或者我可以使用PrimeNG执行以下操作

<button pButton type="button" label="Button created with PrimeNG"></button>

我是否缺少PrimeNG的一些功能,或者将Bootstrap与PrimeNG结合使用是有效的,因为它在Grid-Layout方面提供了更多功能.

我买了一个Angular 4模板主要是为了看看布局是如何完成的,但包括工作组件,我注意到他们在app组件中有一堆设置,主要用于菜单,改变样式,主要是控制外部框架.

在菜单组件和其他一些组件中,他们使用以下内容与AppComponent设置进行通信:

constructor(@Inject(forwardRef(() => AppComponent)) public app:AppComponent) {}

并将在菜单组件中调用类似:this.app.darkMenu = true的内容

这是有效的设计,好的,坏的,过时的？我甚至不知道你可以像这样与App或父组件通信？这应该是一个Observable Subject或EventEmitter,还是可以通过forwardRef进行通信？这似乎与.NET类似,我可以使用this.master.whateverproperty与MasterPage进行通信.

我喜欢forwardRef如何工作,但不确定我是否应该使用它或更改它以不同的方式进行通信？