标签: primeng

<p-panelMenu [model]="items" [style]="{'width':'300px'}" (click)="clicked($event)"></p-panelMenu>`<p-dialog header="Title" [(visible)]="display">
page 1

`

这是我的 ts ` click: any;

display: boolean = false;

constructor() {

 }

 items: MenuItem[];

     ngOnInit() {
         this.items = [
             {
                 label: 'Chapter 1',
                 icon: 'fa-file-o',
                 items: [{
                         label: 'Chapter1.1', 
                         icon: 'fa-plus',
                         items: [
                             {label: 'Chapter1.1.1'},
                             {label: 'Chapter1.1.2'},
                         ]
                     },
                     {label: 'Chapter1.2'},
                     {label: 'Chapter1.3'}
                 ]
             },
             {
                 label: 'Chapter 2',
                 icon: 'fa-edit',
                 items: [
                     {label: 'Chapter 2.1', icon: 'fa-mail-forward'},
                     {label: 'Chapter 2.2', icon: 'fa-mail-reply'}
                 ]
             }


         ];
     }
     clicked(event=1) {
         console.log("event",event)

            this.display=true; …

有人能告诉我如何从我的树中删除特定节点吗？

示例：根节点(this.documentsTree[0]) children(this.documentsTree[0].children[0], this.documentsTree[0].children[1])。第一个孩子也有一个孩子(this.documentsTree[0].children[0].children[0]) <= 这只是一个小例子。我正在使用 Angular 并且我正在使用来自PrimeNG 的Tree 。下面你可以看到我的代码的一部分。谢谢！：

import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';
export class DocumentsComponent implements OnInit {

documentsTree: TreeNode[] = [];


private createNode(category: CategoryModel) {
 let node = {
   data: category,
   label: category.name,
   expandedIcon: "fa-folder-open",
   collapsedIcon: "fa-folder",
   expanded: category.id == 1,
   children: [],
   leaf: false
 };
 category.children.forEach(x => node.children.push(this.createNode(x)));
 return node;
 }

private loadCategoryTree() {

  this.documentsTree = [];
  var node = this.createNode(this.documentCategoryDTO);
  this.documentsTree = [node];
  this.documentsTreeAux = this.documentsTree;
} 

我正在尝试在我的应用程序中实现primeng Steps。我按照文档中的示例创建自定义样式步骤。相反，我正在获得标准的样式步骤。.css 文件中的书面样式类。

step1.component.html
------------------------
<div>
<p-steps [model]="items" styleClass="steps-custom" [(activeIndex)]="activeIndex" ></p-steps>
</div>

step1.component.ts
--------------------

@Component({
    selector: 'app-routing',
    templateUrl: './step1.component.html',
    styleUrls: ['./step1.component.css'],
    providers: [RoutingService]
})

export class Step1Component  implements OnInit {

  items: MenuItem[];
  activeIndex: number = 1;

  constructor(private routingService: RoutingService) {
  }

  ngOnInit() {
    this.items = [{
      label: 'Personal',
      command: (event: any) => {
        this.activeIndex = 0;
      }
    },
      {
        label: 'Seat',
        command: (event: any) => {
          this.activeIndex = 1;
        }
      },
      {
        label: 'Payment',
        command: (event: any) => {
          this.activeIndex …

我有一个包含 primeNg 树的 primeNg。我必须拥有的是响应模式。我必须让树完全展开。使用上述设置，有些情况下对话框/树比屏幕长。

有没有办法设置对话框的样式以响应最大高度。

我使用<p-selectButton>了很多，有时我需要禁用它的某些选项。怎么做？在我的graphManager.ts我有：

graphTypes: Array<SelectItem> = [
            {label: 'bar', value: 'bar', disabled : true },
            {label: 'line', value: 'line', disabled : false},
];

selectedGraphType: SelectItem = this.graphTypes[0];

然后，在graphManager.html我有：

<p-selectButton class="customSelector select-button-big ui-button-rounded"
              [options]="graphTypes" 
              [(ngModel)]="selectedGraphType"
              (onChange)="setSelectedGraphType($event)" >
</p-selectButton>

我有我的习惯SelectItem.ts：

export interface SelectItem {
    label?: string;
    value: any;
    styleClass?: string;
    icon?: string;
    title?: string;
    disabled?: boolean;
}

但是这些选项仍然可以点击。如何禁用某些选项供选择？唯一有效的是深入研究node_modules/primeng/components/selectbutton/selectbutton.js并更改第 55 行：

SelectButton.prototype.onItemClick = function (event, option, checkbox, index) {
        if (this.disabled || option.disabled) {

所以我添加了 …

我正在使用p-table带有“分页器”和“延迟加载”的组件，并且我根据需要制作了一个搜索组件。
当我进行过滤并且页面索引位于另一个页面上时，我正在尝试解决该问题。
示例：
页面索引 = 2
过滤文本 = texto。

然后，我更新表上的记录和页数。但如果结果有更多或相等数量的索引页，则页索引继续为 2。

我尝试从 Event 更改值，但它不适用。

文档 PrimeNG 延迟加载：

loadData(event: LazyLoadEvent) {
  //event.first = First row offset
  //event.rows = Number of rows per page
  //event.sortField = Field name to sort in single sort mode
  //event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
  //multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
  //filters: …

Run Code Online (Sandbox Code Playgroud)

我想创建生成数据网格的 childComponent。所以，我创建了 grid.component.html 和 grid.component.ts。我的目标是，我的队友从不接触 grid.ts 和 grid.html。因为我的应用程序中的所有页面的网格结构都是相似的。所以，他们只添加像 myComponent.html 和 myComponent.ts。他们会将按钮的 html 和按钮的点击事件写入 myComponent。我可以创建网格。但我的问题是，我无法在 showDetail 方法中访问 rowData。（“rowData”是 primeNg 指令的隐含。我没有在任何地方设置。我只给出了 p-table 值。）

我的组件.html

<app-grid>
  <ng-template pTemplate="body" let-rowData="rawData">
        <button label="Reject" (click)="reject(rowData)"></button>
        <button label="Detail" (click)="showDetail(rowData)"></button>
  </ng-template>
</app-grid>

myComponent.ts

reject(data){
  console.log("Reject data ", data);
}

showDetail(data){
   console.log("showDetail data ", data);
}

网格组件.html

rawData = {}

@ContentChild(TemplateRef)
templateRef : TemplateRef<any>;

grid.component.ts

<p-table [value]="globalVariables.myData">
   <ng-template pTemplate="body" let-rowData>  // This rowData come from PrimeNg "implicit" value
     <tr>
       <td *ngFor="let col of globalVariables.columns">
          {{ rowData[col.field] }}
       </td>
       <td> …

我正在考虑优化一个工作 Angular 项目，我们目前正在研究如何使用 PrimeNG。Webpack 文档 ( https://webpack.js.org/guides/tree-shaking/ )上的 Tree Shaking 部分说它依赖于 ES2015 模块格式来确定可以修剪掉哪些代码，因为 CommonJS 无法进行静态分析。

因此，我假设 Angular 编译器具有相同的限制，因为它在构建过程中使用 Webpack。

话虽如此，我正在查看 PrimeNG 的安装文档（https://www.primefaces.org/primeng/#/setup），它声称它以 CommonJS 格式分发。

这是否意味着我们在导入单个模块时被迫导入整个 PrimeNG？我们可以做些什么来只导入我们需要的东西？

最后，有没有办法确定我自己的项目是导入整个 PrimeNG 还是我们需要的？

谢谢！

PrimeNg 提供了非常好的日历组件，它工作得非常好，但是有没有办法在选择 2 个日期后关闭它？

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"></p-calendar>

在文档中， 我注意到两件有趣的事情： - 事件onSelect，不幸的是它可以在普通日历上工作，我们按一次（这里我们需要按两次） - 属性：hideOnDateTimeSelect，但它似乎不是我想要的因为，因为它也不起作用。

我想我可以做这样的事情：

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"
            (onSelect)="onSelect()"></p-calendar>

private dateSelected() {
    if (this.rangeDates[0] !== null && this.rangeDates[1] !== null) {
    //really dont know how to do "close" right now.
    }
}

我想使用 PrimeNG 的FlexGrid并尝试简单地复制示例：

<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>

它应该输出1 2 3彼此相邻的数字。遗憾的是它没有，而只是输出：

1
2
3

我可以使用 PrimeNG 的按钮样式。然而，我确保我导入了入门指南中提到的 css 文件。在我app.module.ts它说：

        "styles": [
          "src/styles.css",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/nova-light/theme.css",
          "node_modules/primeng/resources/primeng.min.css"
        ],

所以这些似乎在那里。我做错了什么？