如何使特定单元格在 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

Answer 2

您可以使用 ngContainer 和 *ngIf 来选择要显示的模板：

<td *ngFor="let col of columns">
    <ng-container *ngIf="col.header != 'ملاحظات'; else noEdit">
        <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>
    </ng-container>

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

A complete example can be seen here.

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

How to make a specific cell not editable in inline editable row in primeNG

typescript

primeng

angular