标签: primeng

我在Angular 2模板中遇到了一个奇怪的赋值语法.

<template let-col let-car="rowData" pTemplate="body">
    <span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>

看来,let-col和let-car="rowData"创建两个新的变量col和car,然后可以绑定到模板中.

资料来源:https://www.primefaces.org/primeng/#/datatable/templating

这个神奇的let-*语法叫什么？

它是如何工作的？

let-something和之间有什么区别let-something="something else"？

可以使用let-col而不是在let-car="rowData"不更改最终DOM结构的情况下重写上述代码吗？

我试图在詹金斯上构建我的项目。本地构建成功，但 Jenkins 构建失败。有什么解决办法吗？我正在使用 primeng 模块来实现 p-organizationchart。我怀疑这可能是问题所在。

我使用的版本是：

`"primeicons": "^4.1.0",
 "primeng": "^11.3.0",
 "node" : 14.16.0`

我正在研究 Angular 8

我想根据组件级别而不是整个应用程序来改变primeng组件的样式,要么我必须更改主theme.css文件或内联样式中的样式,但似乎内联有时不能按预期工作让我们假设作为示例我必须使用

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

我必须ui-dropdown-item根据文档更改类类名称的样式.

我需要相同的组件与两个差异风格什么是最好的approcah相同？如果有人有工作的例子请添加链接.

如何将primeNG下拉宽度设置为在其容器内伸展100%？

它似乎有固定的element.style和.ui-dropdown {width:100%}覆盖不起作用.

我有一个具有行扩展功能的PrimeNg可涡轮增压功能.

如何在默认情况下展开行.

这是我的代码:

HTML

<p-table [columns]="cols" [value]="cars" dataKey="vin">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th style="width: 2.25em"></th>
        <th *ngFor="let col of columns">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    <tr>
        <td>
            <a href="#" [pRowToggler]="rowData">
                <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
            </a>
        </td>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-g-12 ui-md-3" style="text-align:center">
                    <img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
                </div>
                <div class="ui-g-12 …

我从Angular 2 RC5和PrimeNG 1.0.0-beta.13 beta开始.我正在将PrimeNg组件加载为xModules,并且在显示Data Table,Input,SelectItem,Buttons,modals时没有任何问题.但是,当我尝试使用TabView或Accordion时,我收到此错误.

未处理的Promise拒绝:模板解析错误:'p-accordionTab'不是已知元素:

我在@NgModule中导入了TabViewModule.目前,我更新了我的应用程序以使用Angular 2.0.0(最终版)和PrimeNg beta.16版(最新版),但仍然存在错误.我正在使用webpack来填充polyfill,供应商和应用程序代码,我在webpack生成的js文件中看到了accordion和tabview模块.

我不确定我错过了什么.如果您需要更多信息,请告诉我.

提前致谢!

一些片段:

app.module.ts

import { 
ButtonModule, 
  DataTableModule, 
  DialogModule, 
  GrowlModule,  
  TabViewModule,
  AccordionModule }  from 'primeng/primeng';

@NgModule({
...
imports: [
DataTableModule, 
DialogModule, 
GrowlModule,  
TabViewModule,
AccordionModule
],
...
});

template.html(从PrimeNG文档粘贴)

<p-accordion>
<p-accordionTab header="Header 1">
   Content 1
</p-accordionTab>
<p-accordionTab header="Header 2">
    Content 2
</p-accordionTab>
<p-accordionTab header="Header 3">
    Content 3    
</p-accordionTab>

我想使用组件的styleClass属性Togglebutton.正如另一篇文章所述,我认为通过以下方式直截了当:

styleClass="test"

在我的css文件中,我然后设置了一些属性,比如

.test { background: red; }

但这不起作用.与工作style是利用非常清楚[style]="{'background':'red'}"没有问题这一点.但是styleClass不起作用.这是组件.不知道怎么用styleClass？

我有一个primeng turbo-table组件.我需要在桌面上应用多个过滤器.
从父母那里我
myTable.doFilter(first_values); myTable.doFilter(second_values);一个接一个地 打电话

在子(turbo-table)组件上,实际过滤器的应用类似于
doFilter(...filter_values...){ this.pTable.filter(...filter_values...); } 问题是第二个过滤器在第一个过滤器完成之前应用并导致意外结果.
上一次过滤完成后,如何调用过滤器.过滤器完成后会发出一个事件但我无法找到一种方法来利用它.

Parent.ts

 fetchList(searchData) {
        this.ratesTable.reset();
        this.ratesDataSource = [];
        this.programService.fetchList(searchData)
          .then(
            (response) => {

              this.ratesDataSource = response.rates;
              this.doTermFilter();
              this.doLoanFilter();
            })
          .catch((error) => {
            console.error("from ts" + error);
          });
      }
    doTermFilter(){
    this.doFilter({ filterValue: _termFilters, columnField: "COL1", filterMethod: "in" });
    }
doLoanFilter(){
    this.doFilter({ filterValue: _loanFilters, columnField: "COL7", filterMethod: "in" });
    }

child.ts(涡轮表)

 doFilter(doFilterInput: { filterValue: any[], columnField: any, filterMethod: any }) {
    this.pTable.filter(doFilterInput.filterValue, doFilterInput.columnField, doFilterInput.filterMethod);
    }

任何帮助深表感谢.谢谢

我对二进制有问题，即使添加括号也是如此。

我正在使用 primeNG 库。

在 HTML 文件中我写了这段代码：

<div class="products-page">
    <div class="p-grid">
      <div class="p-col-3" *ngIf="!isCategoryPage">
        <h4>Categories</h4>
        <div class="p-field-checkbox" *ngFor="let category of categories">
          <p-checkbox
            [(ngModel)]="category.checked"
            binary="true"
            [inputId]="category.id"
            (onChange)="categoryFilter()"
          ></p-checkbox>
          <label for="{{ category.id }}">{{ category.name }}</label>
        </div>
      </div>
      <div [ngClass]="{ 'p-col-9': !isCategoryPage, 'p-col-12': isCategoryPage }">
        <div class="p-grid" *ngIf="products">
          <div
            [ngClass]="{ 'p-col-4': !isCategoryPage, 'p-col-3': isCategoryPage }"
            *ngFor="let product of products"
          >
            <products-product-item [product]="product"></products-product-item>
          </div>
        </div>
      </div>
    </div>
  </div>

,,,,

在.ts文件中：

import { Component, OnInit } from '@angular/core';
import { Product, Category } from '@bluebits/products'; …

我们正在使用PrimeNG 1.0.0-beta.16的p-dataTable

我想在值为true时向行添加样式.我想出了如何用单元格做这个,但我需要整行改变它的背景.

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]="!timePeriod.IsNext">工作但rowStyleClass="missingPeriod"不是.

请指教.

更新语法:

已更新至v1.0.1

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template …