Question

我想将p-dataTable组件包装在我自己的组件中，因为我需要为它添加自定义样式（以及其他一些东西），我希望看起来和感觉无处不在。我想要提供给用户的是能够自定义单元格的编辑（使用父组件的上下文进行编辑）。我需要一个配方如何实现这一点，经过12个小时的尝试后，我想知道它是否可能，如果可能的话，直接在模板中使用p-dataTable会更容易。

这是一个吸虫： https://plnkr.co/edit/HsEZWBkTmtFRTPGpwjJR?p=preview

以下是我想要实现的近似值。我希望用户能够为特定列提供自定义编辑器模板，例如：Color列中的p-dropdown，因此可以在my-data-table客户端组件中使用，例如：

<my-data-table [title]="title" [columns]="columns" [data]="data">
  <ng-container *ngIf="column.header === 'Color'">
    <ng-template pTemplate="editor">
      <p-dropdown [(ngModel)]="rowData.mask" [options]="colors" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
    </ng-template>
  </ng-container>
</my-data-table>

请注意，这是不正确的。基本上我需要的是：2个上下文，即p列上下文和客户端组件上下文（能够将颜色绑定到选项）。任何想法如何实现或提供类似功能的东西都非常受欢迎。

Answer 1

根据您的情况，您可以让ngIf有两个模板选项。

<p-column field="fieldName" header="Header" [style]="{'width':'180px'}" [sortable]="true" [editable]="true">
    <ng-template let-col let-row="rowData" pTemplate="editor">
      <div *ngIf="row && 'Y'!=row.abc">{{row[col.field]}}</div>
      <div *ngIf="row && 'Y'==row.abc">
        <input type="text" pInputText [(ngModel)]="row[col.field]" />
      </div>
    </ng-template> 
</p-column>

根据 abc 的值，您可以在数据表中包含可编辑或只读字段。

Angular和primeng数据表，提供自定义单元格编辑器

1 个答案: