angular - PrimeNG 表:编辑模式无法正常工作 - 编辑字段为空
问题描述
当我单击单元格时,编辑模式开始,但文本框为空。
代码:
<p-table #dt [columns]="_gridDefinitions" [value]="_appointmentGridDataSource"
[loading]="loading"
sortMode="multiple"
selectionMode="multiple" [(selection)]="_selectedAppointments" [metaKeySelection]="true" dataKey="AppointmentId"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)"
styleClass="p-datatable-sm p-datatable-gridlines"
[autoLayout]="true">
<ng-template pTemplate="caption">
<div class="p-d-flex p-ai-center p-jc-between">
Terminübersicht
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
{{gridDefinition.HeaderLabel}} <p-sortIcon field="{{gridDefinition.PropertyBinding}}"></p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
<p-calendar (click)="clickOnFilter($event)" (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'Date', 'equals')"
[showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="dd.mm.yyyy"
*ngIf="gridDefinition.FormatAsDate === true"></p-calendar>
<input pInputText type="text" (click)="clickOnFilter($event)" placeholder="Search by Name" class="p-column-filter"
(input)="dt.filter($event.target.value, 'RemarkInternal', 'contains')"
*ngIf="gridDefinition.FormatAsDate === false && gridDefinition.HeaderLabel != 'KW' ">
<p-multiSelect (click)="clickOnFilter($event)" [options]="weekDays" placeholder="All" styleClass="p-column-filter" optionLabel="label"
(onChange)="onWeekDayChange($event)"
*ngIf="gridDefinition.FormatAsDate === false && gridDefinition.HeaderLabel === 'KW' "></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-appointment let-columns="columns">
<tr [pSelectableRow]="appointment">
<td *ngFor="let gridDefinition of columns" [ngStyle]="{'text-align': gridDefinition.Center === true ? 'center' : 'left' }" pEditableColumn>
<span *ngIf="gridDefinition.FormatAsDate === true && gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding] | date: 'dd.MM.yyyy'}}</span>
<span *ngIf="gridDefinition.FormatAsDate === false && gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding]}}</span>
<p-cellEditor *ngIf="gridDefinition.Editable === true">
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="appointment[gridDefinition.PropertyBinding]">
</ng-template>
<ng-template pTemplate="output">
{{appointment[gridDefinition.PropertyBinding]}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
当我将 [(ngModel)] 更改为 [value] 时,它可以工作。但我认为根据官方文件,这不是要走的路。https://www.primefaces.org/primeng/showcase/#/table/edit
这有效:
<p-cellEditor *ngIf="gridDefinition.Editable === true">
<ng-template pTemplate="input">
<input pInputText type="text" [value]="appointment[gridDefinition.PropertyBinding]">
</ng-template>
<ng-template pTemplate="output">
{{appointment[gridDefinition.PropertyBinding]}}
</ng-template>
</p-cellEditor>
解决方案
推荐阅读
- mongodb - 文档的mongodb默认值不在数组中
- c - 需要帮助才能将此 C 代码“翻译”成仅当句子一时
- matlab - 如何在 MATLAB 中保存/加载 App Designer 应用程序对象?
- r - 增加绘图的像素分辨率
- erlang - 重新启动 => erlang 主管的瞬态与永久
- ios - 如何使用自定义 MKAnnotation 启动自定义 MKAnnotationView?
- python - 多个字典进入列表
- node.js - 为什么我从 node.js 后端下载的 csv 文件不包含 csv 数据?
- typescript - 将 MikroORM 迁移与 Postgresql 连接起来?npx 命令失败。我错过了什么?
- python - 在 Python 中安装包“-ensorflow-gpu”