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

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 🚀