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

【问题标题】：How to make a specific cell not editable in inline editable row in primeNG如何在primeNG的内联可编辑行中使特定单元格不可编辑
【发布时间】：2019-12-14 20:28:40
【问题描述】：

我将 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>

为了设想所需，请参阅此图片

提前感谢您的帮助

【问题讨论】：

你能创建a stackblitz example吗？
非常感谢您的回复 [stackblitz.com/edit/…

标签： angular typescript primeng

【解决方案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 ?

【讨论】：

很好，当我在输入元素中输入* ngIf时它变得更加完美

【解决方案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.

【讨论】：