标签: primeng

我已将使用 primeng 控件的 Angular 11 项目更新为 Angular 12。完成后，primeng pKeyFilter 在使用的​​所有地方都会抛出错误。从头开始创建一个新的 Angular 12 项目不会出现这个问题。升级后，其他一切似乎都工作正常。有什么想法吗？

这是组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-key',
  templateUrl: './key.component.html',
  styleUrls: ['./key.component.scss']
})
export class KeyComponent implements OnInit {
  public myvalue: string = '';

  constructor() { }

  ngOnInit(): void {
  }

}

这是 HTML

<input type="text" pInputText [(ngModel)]="myvalue" pKeyFilter="int"/>

<p>
  <span>{{myvalue}}</span>
</p>

这是完整的错误

错误：src/app/modules/nourishment/pages/test/key/key.component.html:1:23 - 错误 NG8007：双向绑定“ngModel”的属性和事件部分未绑定到同一目标。欲了解更多信息，请访问https://angular.io/guide/two-way-binding#how-two-way-binding-works

1 <input type="text" [(ngModel)]="myvalue" pKeyFilter="int"/> ~~~~~~~

node_modules/@angular/forms/forms.d.ts:3297:22 3297导出声明类NgModel扩展NgControl实现OnChanges，OnDestroy {〜~~~~~~绑定的属性一半是到'NgModel'组件。

node_modules/primeng/keyfilter/keyfilter.d.ts:6:22 6导出声明类KeyFilter实现Validator { ~~~~~~~~~ 绑定的事件一半是到'KeyFilter'组件。

src/app/modules/nourishment/pages/test/key/key.component.ts:5:16 5 …

我正在使用prime-ng dataTable组件来显示用户列表.我希望这个列表按默认下降的第一列排序,并让dataTable将第一列显示为已排序.

 <p-dataTable [value]="webUserSummaryList" [rows]="10"  reorderableColumns="true">
    <p-column field="userName" header="Username" [filter]="true" [sortable]="true"></p-column>
    <p-column field="emailAddress" header="Email" [filter]="true" [sortable]="true"></p-column>
    <p-column field="firstName" header="First Name" [filter]="true" [sortable]="true"></p-column>
    <p-column field="lastName" header="Last Name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
</p-dataTable>   

编辑:我已经想出一种设置默认排序列的方法是使用sortField ="userName".但是,我仍然无法将列默认为降序.

我正在 Angular 9 项目中使用 primeng 分页器组件来对大量配置文件进行分页。如果用户位于第 3 页，打开个人资料并返回搜索，则当前页面为 1，但它应该是 3。我已将页面保存在服务中，因此会显示正确的数据，但分页器显示的是错误的页面。我找不到设置分页器当前页面的方法。使用 [first] 属性不起作用。

以下是我安装PrimeNG的步骤:

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

2. 更新Index.html :(我必须将目录primeng和primeui从node_modules复制到assets文件夹以摆脱404 文件未找到错误)

   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="assets/styles.css">
   <link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
   <link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`
   

   Run Code Online (Sandbox Code Playgroud)

3. 更新test.component.ts:

   import {Calendar} from '../../assets/primeng/primeng';
   ....
   export class TestComponent {
        dateValue:string;
   }
   

   Run Code Online (Sandbox Code Playgroud)

4. 更新test.component.html:

   <p-calendar formControlName="date"></p-calendar>
   

   Run Code Online (Sandbox Code Playgroud)

结果:页面上没有显示任何内容.

我错过了什么吗？

EDIT1:

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

   错误:未捕获(在承诺中):无法分配给引用或变量!

EDIT2:

我只是在另一个没有使用angular-cli的项目中尝试过它:

    <link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
    ....
    import {Calendar} from 'primeng/primeng'; …

我styleUrls在声明我的Angular 2组件时尝试使用该属性来利用View Encapsulation,但是当Angular完成初始化之后元素被插入DOM时似乎存在问题.

我的情况是PrimeNG分页符,我目前无法设置样式,因为它没有被Angular应用范围.

看下面<p-datatable>元素有一个范围(它存在于原始标记中)但<p-paginator>没有(事后已添加到DOM).

因此,Angular插入的样式HEAD与我的元素不匹配:

<style>
    p-datatable[_ngcontent-xnm-4] p-paginator[_ngcontent-xnm-4]:not(:first-child) {
    display: none;
}
</style>

这是Angular 2中视图封装的限制还是有办法让它按需"重新调整"DOM？

编辑错字和澄清标题

我正在一个项目中,我需要使用PrimeNg来表格,我在定义第一列的宽度时遇到问题.

在我的HTML代码中,我有类似的东西:

<p-datatable styleClass="myTable">
     <p-column>

     </p-column>
     ...
</p-datable>

在我的CSS中,我有一些东西:

.myTable td:nth-child(1) {
    width:300px;
}

还尝试使用以下HTML:

 <p-datatable>
     <p-column styleClass="col1">

     </p-column>
     ...
 </p-datable>

在我的CSS中:

td.col1 {
    width: 300px;
}

我也检查了代码并看到了行的类,即tr.ui-widget-content ui-datatable-even并尝试了CSS ..

tr.ui-widget-content ui-datatable-even td:nth-child(1) {
    width: 500px !important;
}

似乎没有任何工作.任何人都可以告诉我是否可以定义列的宽度,如果是肯定的,我该怎么做？

谢谢你的回复......

使用Angular v2.4.8和PrimeNg v1.1.4

我有一个包含两个组件的页面:

1. Dropzone,用于上传文件
2. p-datatable显示上传的文件

我将Dropzone配置为一次发送5个文件,当完成5个文件时,onDropZoneSendingMultiple会引发事件.上传所有文件时onDropZoneQueueComplete.

在两个侦听器中,我想刷新第二个组件中的数据表.这不起作用.我需要刷新页面才能看到新文件.

我的主页HTML:

<div class="row" id="dropzoneContainer">
    <dropzone class="dropzone" #dz [config]="dropZoneConfig" 
              (error)="onDropZoneUploadError($event)"
              (sendingmultiple)="onDropZoneSendingMultiple($event)"
              (queuecomplete)="onDropZoneQueueComplete($event, dz);"
              (maxfilesreached)="onDropZoneMaxfilesReached($event)"
              (maxfilesexceeded)="onDropZoneMaxfilesExceeded"></dropzone>
</div>

<div class="row">
    <div class="col-md-12">
        <FilesList></FilesList>
    </div>
</div>

该Dropzone-component显示悬浮窗.该FilesList说明了DataTable.部分HTML:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" (onRowSelect)="details($event)">

在我的主要ts文件中,我有:

@ViewChild(FilesListComponent)
public filesListComponent: FilesListComponent;

private reloadFileList() {
  this.filesListComponent.reload();
}

在我的文件列表中我有

public files: File[];
public reload() {
    this.getFiles();
}
public getFiles() {
    this.fileService.getAll()
        .then(
        data => {
            this.files = data;
        });
}

getFiles在页面加载时也会调​​用.当我添加console.log()语句时,我可以看到它 …

我们一直试图将PrimeNG组件合并到JHipster(角度4)生成的项目中,但没有成功.下载并将PrimeNG安装到我们的项目中后,我们可以导入类,但是当我们将相应的标记包含到模板中时,不会绘制任何内容.我们测试了几种PrimeNG组件.我们还在app.module等中完成了导入.我希望更具体,但不会在任何地方显示错误.你对PrimeNG和JHipster的合作方式有什么暗示吗？谢谢

我在angular5应用程序中使用PrimeNG.我有p-dropdown的问题

题

我有显示国家的p-down.我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为"India".

我将ng-model值设置为印度,但它不起作用.

我的dummy.component.html代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};
    country: string; constructor() {
    }
    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
// this.countries.push({ label: 'Select Country', value: '' });
//getallcountries …

我正在使用 PrimeNG 的工具提示，并试图在其中包含大量文本时使其更宽，但它没有响应我尝试的任何内容。

我曾尝试使用 PrimeNG 的 HTML 属性 tooltipStyleClass 并在 CSS 文件中为该类提供宽度。我还尝试覆盖 PrimeNG 在其文档中描述的 ui-tooltip 类https://www.primefaces.org/primeng/#/tooltip但无济于事。我试过在 Chrome 中调试，但我仍然无法弄清楚。

<!--TODO: make tooltip wider-->
<span *ngIf="uiComponent.component.description.length > 80"
      pTooltip="{{uiComponent.component.description}}"
      tooltipPosition="bottom"
      showDelay="250"
      tooltipStyleClass="tooltip">
  {{uiComponent.component.description.substr(0,80)}}...
</span>

.tooltip {
  width: 100em;
}

到目前为止，无论我做什么，工具提示宽度实际上从未改变。