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>