PrimeNg Table 切换单元格编辑

【问题标题】：PrimeNg Table toggle cell editingPrimeNg Table 切换单元格编辑
【发布时间】：2019-05-09 10:19:35
【问题描述】：

我正在使用primeng 表，并希望通过单击按钮使列可编辑。但是我无法做到这一点。我不知道我必须设置哪个属性才能切换编辑。请帮忙。提前致谢。

这是我的模板：

<ng-template pTemplate="body" let-rowData let-state let-expanded="expanded" let-columns="columns" >
        <tr>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.id">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.id}}
                    </ng-template>
                </p-cellEditor>
            </td>

        </tr>
    </ng-template>

【问题讨论】：

标签： angular typescript primeng primeng-turbotable

【解决方案1】：

第一个选项，我觉得更好地实现这一点，是通过禁用输入控件，如下所述。

<input [disabled]="!editable" pInputText type="text" [(ngModel)]="rowData.id">

您可以在单击按钮时将可编辑属性设置为 true 或 false。该控件将在单元格单击时可见，但它是可以的，因为它不可编辑。

第二个选项是复制具有可编辑条件的单元格，如下所述。

<td pEditableColumn *ngIf="editable" >
            <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="rowData.id">
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData.id}}
                </ng-template>
            </p-cellEditor>
 </td>

<td *ngIf="!editable">{{rowData.id}}</td>

【讨论】：