行扩展器模板在 PrimeNG DataTable 中不起作用

Question

我第一次尝试使用 PrimeNG 模板，但我不知道“let-something”是如何工作的。我尝试了在其他问题中找到的各种组合，但它们都产生相同的错误：

Cannot read property 'undefined' of undefined

在我的例子中，“行”和“列”都没有定义。 所以我想知道let-col和其他“let”在PrimeNG模板中如何工作，在他们的网站中有一个“let-car”的例子，但我似乎不知道那个“car”在哪里从哪里来？

这是我的html代码：

<p-dataTable [value]="devices" expandableRows="true">
  <p-column expander="true" styleClass="col-icon"></p-column>
  <template let-col let-row="rowData" pTemplate="rowexpansion">
    <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:2px">
      <div class="ui-grid-row">
        <div class="ui-grid-col-9">
          <div class="ui-grid ui-grid-responsive ui-grid-pad">
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Vin: </div>
              <div class="ui-grid-col-10">{{row[col.field]}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <p-column *ngFor="let header of columnHeaders" [field]="header.field" [header]="header.header"></p-column>
</p-dataTable>

Answer 1

我认为你不能在行扩展模板中使用let-col，它应该绑定在正文模板的列内

    <p-column field="field_name" header="field_header">
      <ng-template let-col let-item="rowData" let-i="rowIndex" pTemplate="body">
        {{item[col.field]}}         
      </ng-template>
    </p-column>

然后你可以在 rowexpansion 模板中使用 let-item ，如下所示：

<ng-template let-item  pTemplate="rowexpansion">
{{item.field}}
</ng-template>

Answer 2

我遇到了primeNg p-table丢失dataKey属性的情况，放回去后，扩展起作用了