Primeng可编辑行-NullInjectorError:没有可编辑行的提供程序

时间:2019-06-19 13:28:46

标签: angular primeng primeng-turbotable

我有一个有效的primeng表,我想使其行可编辑并遵循their documentation to do so.,但是在尝试加载时会抛出以下错误

NullInjectorError: No provider for EditableRow

我的p表定义如下

<p-table
      [columns]="selectedColumns"
      [value]="tableData"
      [resizableColumns]="true"
      [reorderableColumns]="true"
      [paginator]="true"
      [rows]="10"
      [rowsPerPageOptions]="[5, 10, 25, 50, 100]"
      editMode="row"
>

由于我要加载不同情况下的动态数据,因此我的行定义是(很多,但大多只是从模板复制/粘贴):

      <ng-template *ngIf="canEdit" pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="rowData">
          <ng-container *ngFor="let col of selectedColumns">
            <td>
              <p-cellEditor>
                <ng-template pTemplate="input">
                  <input pInputText type="text" [(ngModel)]="rowData[col.field]" required />
                </ng-template>
                <ng-template pTemplate="output">
                  {{ rowData[col.field] }}
                </ng-template>
              </p-cellEditor>
            </td>
          </ng-container>
        </tr>
        <td style="text-align:center">
          <button
            *ngIf="!editing"
            pButton
            type="button"
            pInitEditableRow
            (click)="onRowEditInit(rowData)"
          >edit</button>
          <button
            *ngIf="editing"
            pButton
            type="button"
            pSaveEditableRow
            style="margin-right: .5em"
            (click)="onRowEditSave(rowData)"
          >save</button>
          <button
            *ngIf="editing"
            pButton
            type="button"
            pCancelEditableRow
            (click)="onRowEditCancel(rowData, ri)"
          >cancel</button>

但是它不喜欢pInitEditableRow / pSaveEditableRow / pCancelEditableRow

这就是错误所抱怨的。 我已经将Table导入了我的应用程序模块中,并且所有示例均未添加任何其他内容,因此我不确定为什么会说没有EditableRow的提供程序。

1 个答案:

答案 0 :(得分:1)

我真的很傻。错误太奇怪了,我想不通了。

我的结帐schema = {'a': {'type': 'integer', 'meta': {'label': 'Age'}}}放在错误的位置。这些按钮意外地位于该行的外面,因此当然它永远都不会起作用。

一旦我将按钮与其他tds包裹在相同的tr中,它就可以正常工作。