Angular的Web项目求助!!!
哪位大神能解答一下,为什么这个内嵌的表格只有列名没有值呢?
问题如下图:
这是我写的代码:
<p-table #dataTable sortMode="multiple" (onLazyLoad)="getCollectionEvents($event)"
[value]="primengTableHelper.records"
rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
[lazy]="true" [scrollable]="true" ScrollWidth="100%"
[responsive]="primengTableHelper.isResponsive"
[resizableColumns]="primengTableHelper.resizableColumns" dataKey="collectionEvent.id">
<ng-template pTemplate="header">
<tr>
<th style="min-width: 5%"></th>
<th style="min-width: 15%"
[hidden]="!(['Pages.Emgt.CollectionEvents.Edit', 'Pages.Emgt.CollectionEvents.Delete'] | permissionAny)">
{{'Actions' | localize}}
</th>
<th style="min-width: 20%" pSortableColumn="collectionEvent.name">
{{'Name' | localize}}
<p-sortIcon field="name"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="collectionEvent.eventId">
{{'EventId' | localize}}
<p-sortIcon field="eventId"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="collectionEvent.description">
{{'Description' | localize}}
<p-sortIcon field="description"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="collectionEvent.modelName">
{{'ModelName' | localize}}
<p-sortIcon field="modelName"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit" let-expanded="expanded">
<tr>
<td style="min-width: 5%">
<button type="button" pButton pRipple [pRowToggler]="record" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td style="min-width: 15%"
[hidden]="!(['Pages.Emgt.CollectionEvents.Edit', 'Pages.Emgt.CollectionEvents.Delete'] | permissionAny)">
<div class="btn-group" dropdown placement="bottom left" container="body">
<button id="dropdownButton" type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdownToggle aria-controls="dropdownMenu">
<i class="fa fa-cog"></i><span class="caret"></span>
{{"Actions" | localize}}
</button>
<ul id="dropdownMenu" class="dropdown-menu" role="menu" *dropdownMenu aria-labelledby="dropdownButton">
<li *ngIf="'Pages.Emgt.CollectionEvents.Edit' | permission" role="menuitem">
<a href="javascript:;" class="dropdown-item"
(click)="createOrEditCollectionEventModal.show(record.collectionEvent.id)">{{'Edit' | localize}}</a>
</li>
<li *ngIf="'Pages.Emgt.CollectionEvents.Delete' | permission" role="menuitem">
<a href="javascript:;" class="dropdown-item"
(click)="deleteCollectionEvent(record.collectionEvent)">{{'Delete' | localize}}</a>
</li>
</ul>
</div>
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'Name' | localize}}</span>
{{record.collectionEvent.name}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'EventId' | localize}}</span>
{{record.collectionEvent.eventId}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'Description' | localize}}</span>
{{record.collectionEvent.description}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'ModelName' | localize}}</span>
{{record.collectionEvent.modelName}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-record>
<p-table [value]="record.collectionEvent.reports" dataKey="name">
<ng-template pTemplate="header">
<tr>
<th style="min-width: 5%">
</th>
<th style="min-width: 20%" pSortableColumn="report.name">
{{'Report Name' | localize}}
<p-sortIcon field="name"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="report.reportId">
{{'ReportId' | localize}}
<p-sortIcon field="name"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="report.description">
{{'Description' | localize}}
<p-sortIcon field="description"></p-sortIcon>
</th>
<th style="min-width: 20%" pSortableColumn="report.modelName">
{{'ModelName' | localize}}
<p-sortIcon field="modelName"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-report let-expanded1="expanded">
<tr>
<td style="min-width: 5%">
<button type="button" pButton pRipple [pRowToggler]="report" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded1 ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'Name' | localize}}</span>
{{report.name}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'ReportId' | localize}}</span>
{{report.reportId}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'Description' | localize}}</span>
{{report.description}}
</td>
<td style="min-width: 20%">
<span class="p-column-title"> {{'ModelName' | localize}}</span>
{{report.modelName}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-report>
<p-table [value]="report.identificaions" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="min-width: 5%"></th>
<th style="min-width: 15%" pSortableColumn="identification.name">
{{'Name' | localize}}
<p-sortIcon field="name"></p-sortIcon>
</th>
<th style="min-width: 15%" pSortableColumn="identification.identification">
{{'Identification' | localize}}
<p-sortIcon field="identification"></p-sortIcon>
</th>
<th style="min-width: 15%" pSortableColumn="identification.format">
{{'Format' | localize}}
<p-sortIcon field="format"></p-sortIcon>
</th>
<th style="min-width: 15%" pSortableColumn="identification.type">
{{'Type' | localize}}
<p-sortIcon field="type"></p-sortIcon>
</th>
<th style="min-width: 15%" pSortableColumn="identification.description">
{{'Description' | localize}}
<p-sortIcon field="description"></p-sortIcon>
</th>
<th style="min-width: 15%" pSortableColumn="identification.modelName">
{{'ModelName' | localize}}
<p-sortIcon field="modelName"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-identification>
<tr>
<td style="min-width:5%"></td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'Name' | localize}}</span>
{{identification.name}}
</td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'Identification' | localize}}</span>
{{identification.identification}}
</td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'Format' | localize}}</span>
{{identification.format}}
</td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'Type' | localize}}</span>
{{identification.type}}
</td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'Description' | localize}}</span>
{{identification.description}}
</td>
<td style="min-width: 15%">
<span class="p-column-title"> {{'ModelName' | localize}}</span>
{{identification.modelName}}
</td>
</tr>
</ng-template>
</p-table>
</ng-template>
</p-table>
</ng-template>
</p-table> 