Question

我正在将PrimeNG DataTable与Angular一起使用，并且行可以像文档中的示例那样进行内联编辑[https://www.primefaces.org/primeng/#/table/edit]，并且我尝试从该可编辑行中除一个单元格外，但是我使用* ngFor来查看TD中的数据元素

我的HTML ：

<ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex" let-columns="columns">
    <tr [pSelectableRow]="rowData" [pEditableRow]="rowData">
        <ng-container>
            <td class="ui-resizable-column" *ngFor="let col of columns">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]"style="width:100%"/>
            </ng-template>
                        <ng-template pTemplate="output">
                            {{ rowData[col.field] }}
                        </ng-template>
                </p-cellEditor>
            </td>

        </ng-container>
    </tr>
</ng-template>

为了设想所需，请参见此图像

预先感谢您的帮助

Answer 1

您可以仅向列数据添加一个属性，该属性的基础显示p-cellEditor或仅显示静态数据

this.cols=[
  { field: 'id', header: '#'  },
  { field: 'name', header: 'الاسم' },
  { field: 'phone', header: 'الهاتف' },
  { field: 'address', header: 'العنوان' },
  { field: 'account', header: 'الحساب' , isStatic :true }, // ?
  { field: 'nots', header: 'ملاحظات', isStatic :true }, // ?,
];

模板

<td *ngFor="let col of columns">
    <p-cellEditor *ngIf="!col.isStatic;else staticTemplate">
       <ng-template pTemplate="input">
        <input pInputText type="text" [(ngModel)]="rowData[col.field]" style="width:100%" />
       </ng-template>
       <ng-template pTemplate="output">
            {{ rowData[col.field] }}
       </ng-template>
    </p-cellEditor>

    <ng-template #staticTemplate>
        {{ rowData[col.field] }}
    </ng-template>
</td>

demo ?

Answer 2

您可以将onRemoval与ngContainer一起使用，以选择应显示的模板：

*ngIf

A complete example can be seen here。

如何在primeNG的内联可编辑行中使特定单元格不可编辑

2 个答案: