标签: primeng

当表大小小于多选过滤器对话框大小时，PrimeNG DataTable 多选过滤器不会显示完整对话框。如屏幕截图所示，它位于表格下方

我希望始终在顶部看到多选对话框，无论表/div 大小如何，并且用户应该能够选择值

非常感谢有关此问题的任何建议

{ 
    id: 123,
    email: "abc@gmail.com",
    password: 108,
    myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ] 
}

这就是我从服务器获取要修补的字段的方式，我像这样修补它们：

this.myForm = this.fb.group({
    id: [],
    email: [],
    password: [],
    myObj: [] 
}); 

我需要每个myObj数组都是一个单独的表单控件。我尝试以不同的方式从 HTML 访问它们（例如formControlName = myObj[0]，formControlName = myObj.name ），但没有成功。

如何访问myObjHTML 中的字段？

我需要table在p-table. 我尝试过[id]，[attr.id]但没有成功。

请问还有什么建议吗？

我使用的是contextmenu用turbotable的primeng（6.1.0版本）。

根据网站上的演示，当您右键单击一行时，会出现上下文菜单并选择该行，但是当您在上下文菜单外单击时，菜单消失但该行仍被选中。我想要的是在隐藏上下文菜单时取消选择该行。

见https://www.primefaces.org/primeng/#/table/contextmenu

任何想法如何实现这一目标？

当使用 Primeng 表格并将表格设置为可滚动时，表格应显示滚动条，并且单元格内的文本不应溢出。相反，这不会发生。

在Stackblitz 中检查此示例并调整大小

我正在使用primeng p-calender 我要求不要将过去的日期发送到API，

所以我想禁用过去的日期选择

如果有人知道请评论

提前致谢

Angular 7 - primeng - 确认对话框不起作用

HTML

<p>confirm-dialog</p>
<button type="button" (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button>

打字稿

  confirm() {
console.log('confirm called...')
this.confirmationService.confirm({
  message: 'Are you sure that you want to proceed?',
  header: 'Confirmation',
  icon: 'pi pi-exclamation-triangle',
  accept: () => {
    this.msgs = [{ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }];
    console.log('accept...')
  },
  reject: () => {
    this.msgs = [{ severity: 'info', summary: 'Rejected', detail: 'You have rejected' }];
  }
});

Stackblitz 上的完整代码

https://stackblitz.com/edit/jjay-angular-primeng-gaiizg?file=src%2Fapp%2Fapp.module.ts

我在 Angular 7 应用程序上使用 PrimeNG TurboTable 组件，并且有一个按钮可以向其中添加新行。问题是，当添加新行时，用户必须向下滚动到表格底部才能开始编辑它。我怎么能滚动到它？

这就是我在模板中定义表格的方式：

<p-table [value]="gridOptions" [scrollable]="true" scrollHeight="13em" 
selectionMode="single" [(selection)]="selectedOption" 
(onEditComplete)="onDataChanged($event)"
(onRowReorder)="onDataChanged($event)">
  [ ... ]

</p-table>

这是“添加选项”处理程序：

onAddOption() {
  // This adds a new option to the TurboTable
  this.gridOptions.push({ name: "", arg: "", comment: "", scope: this.scope });

  // I expected that selecting an option would scroll to it, but it doesn't work
  this.selectedOption = this.gridOptions[this.gridOptions.length-1];
}

有任何想法吗？谢谢！

对于 PrimeNG Turbo Table，是否可以在单击排序图标时仅触发排序？

现在，只要我单击标题单元格中的任意位置，它就会触发。我想在单击图标时触发。

我想这可能是在图标级别的某个地方使用 StopPropogation() 实现的...但这可能会停止整个排序

https://www.primefaces.org/primeng/#/table/sort

我正在开发一个项目，在该项目中，我使用了PrimeNg带有 froze & unfroze 列属性的表，并且它在创建普通列时工作正常，*NgFor但是如果我添加新列而不*NgFor在 froze 和 unfroze 表中重复。

如何克服这个问题，因为我希望该列仅在冻结列上而不在未冻结列上。

我的代码：

<ng-template pTemplate="header" let-columns>
    <tr>
      <th>All</th>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td>
                <p-tableCheckbox
                  [value]="rowData"
                  [attr.disabled]="
                    rowData.setupType === 'No Action' &&
                    rowData.currentStatus === 'INACTIVE'
                      ? 'disabled'
                      : null
                  "
                ></p-tableCheckbox>
              </td>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>

列重复问题：

如何克服这个问题？

如果可能，请在PrimeNg表格中指导我。

我正在使用名为 i18next 的国际化框架。我的一个组件是 p-calendar，但我不知道如何使用此框架将其国际化。有谁知道我如何使用 i18next 国际化这个组件？如果有人知道不使用 i18next 的另一种解决方案，我也可以使用。

• 角度版本：8.2
• PrimeNG 版本：8.1.1

我有一张<p-table>桌子sortMode="multiple"。我想在页面首次显示时指定两列作为默认排序。如果我设置 sortMode="single"，它可以通过指定 sortField="year" [sortOrder]="-1" 选项来工作（例如，标题显示为选中状态，列已排序）。多列相当于什么？

类似的示例代码（取自https://www.primefaces.org/primeng/showcase/#/table/sort）

<h3>Multi Sort with MetaKey</h3>
<p-table [columns]="cols" [value]="cars2" sortMode="multiple">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

export class TableSortDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 …

我正在使用 primeng 动态对话框来显示组件中的一些数据。但是，如果对话框打开且会话超时，应用程序会注销，但对话框仍保持打开状态。我想关闭对话框，因为应用程序已注销。我尝试调用 DynamicDialogRef close() 方法，但这不起作用。我怎样才能做到这一点？

这就是我在退出方法中调用的内容 -

 constructor private dialogRef: DynamicDialogRef) { }

 signOut()
        {
        this.dialogRef.close();
        this.dialogRef.destroy();
  }

这就是我调用对话框的方式 - 模板

   <button (click)="showDialog()"></button>

该方法称为：

showDialog() {
   
    const ref = this.dialogService.open(DetailsDialogComponent, {

      data: {
        value: 'TEST,
      },
      header: 'Details Panel",
      width: '70%',
      dismissableMask: true
    });

    
      }