我第一次尝试使用 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>
我认为你不能在行扩展模板中使用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>
我遇到了primeNg p-table丢失dataKey属性的情况,放回去后,扩展起作用了