问题描述
最近我将我的应用程序从 angular 8 更新到了 10 并且一切正常,但所有表都没有显示数据。当我进行一些调试时发现这是因为我为 angular 启用了 IVY,当我关闭它时,数据立即出现。 需要帮助了解 IVY 并希望解决问题。
这是我的Primeng数据表的代码
<p-table
dataKey="StartTime"
rowExpandMode="single"
expandableRows="true"
[columns]="cols"
[value]="activities"
[rowHover]="false"
[responsive]="true"
styleClass="p-datatable-striped"
>
<ng-template pTemplate="header" let-columns>
<tr>
<th [ngStyle]="{'width':'30px' }"></th>
<th [ngStyle]="{'width':'170px' }">{{'widgets.recentActiv.tableFields.strtTime' | translate}}</th>
<th [ngStyle]="{'width':'80px' }">{{'widgets.recentActiv.tableFields.duration' | translate}}</th>
<th [ngStyle]="{'width':'120px' }">{{'widgets.recentActiv.tableFields.address' | translate}}</th>
<th [ngStyle]="{'width':'110px' }">{{'widgets.recentActiv.tableFields.queue' | translate}}</th>
<th [ngStyle]="{'width':'160px'}">{{'widgets.recentActiv.tableFields.wrapup' | translate}}</th>
<th [ngStyle]="{'width':'120px' }">{{'widgets.recentActiv.tableFields.tag' | translate}}</th>
<th [ngStyle]="{'width':'25px' }"> </th>
<th [ngStyle]="{'width':'25px' }"> </th>
<th [ngStyle]="{'width':'40px' }"> </th>
</tr>
</ng-template>
<div style="border-radius: 15px; border: 1px solid saddlebrown;">
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr>
<td *ngFor="let col of columns; let i = index">
<ng-container *ngIf="(col.field != 'disposition') && (col.field != 'Tag') &&
(col.field != 'InitiationMethod') && (col.field != 'Queue') && (col.field != 'WrapUp')
&& (col.field) != 'Note' && (col.field) != 'Address'">
{{rowData[col.field]}}
</ng-container>
<ng-container *ngIf="(col.field == 'Queue')">
<div *ngIf="((rowData[col.field] != null) || rowData[col.field] != 'null'); else notFound">
{{rowData[col.field]}}
</div>
<ng-template #notFound>
-
</ng-template>
</ng-container>
<ng-container *ngIf="(col.field == 'InitiationMethod')">
<div class="tableIcons">
<button *ngIf="rowData[col.field] === 'INBOUND'">
<img src="assets/recent activities/inbound.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'API'">
<img *ngIf="rowData['Channel'] === 'WHATSAPP'" src="assets/recent activities/watsapp.svg" alt="">
<img *ngIf="rowData['Channel'] === 'WEB'" src="assets/recent activities/chat.svg" alt="">
<img *ngIf="rowData['Channel'] === 'CHAT'" src="assets/recent activities/chat.svg" alt="">
<img *ngIf="rowData['Channel'] === 'EMAIL'" src="assets/recent activities/email.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'OUTBOUND'">
<img src="assets/recent activities/outbound.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'EMAIL'">
<img src="assets/recent activities/email.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'TRANSFER'">
<img src="assets/recent activities/inbound.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'WHATSAPP'">
<img src="assets/recent activities/watsapp.svg" alt="">
</button>
<button *ngIf="rowData[col.field] === 'FACEBOOK'">
<img src="assets/recent activities/FACEBOOK.svg" alt="">
</button>
</div>
</ng-container>
<ng-container *ngIf="col.field == 'WrapUp'">
<div class="textOverflow p5" *ngIf="(rowData.WrapUp != null); else notFound" [pRowToggler]="rowData" (click)="setExpandedData(rowData.WrapUp,rowData.Tag,rowData.Note)">
<span class="grayTile"> {{rowData.WrapUp[0]}} </span>
</div>
<ng-template #notFound>
-
</ng-template>
</ng-container>
<ng-container *ngIf="col.field == 'Tag'" >
<div class="textOverflow p5" *ngIf="(rowData.Tag != null); else notFound" [pRowToggler]="rowData" (click)="setExpandedData(rowData.WrapUp,rowData.Note)">
<span class="grayTile text"> {{rowData.Tag[0]}} </span>
</div>
<ng-template #notFound >
-
</ng-template>
</ng-container>
<ng-container *ngIf="col.field == 'Note'">
<button class="rowBtns" (click)="editNotes(rowData.Note,rowData.ContactId)" #tooltip="matTooltip" matTooltip="{{rowData[col.field]}}"
matTooltipPosition="left">
<img src="assets/recent activities/notes.svg">
</button>
</ng-container>
<ng-container *ngIf="col.field == 'Address'">
<div class="textOverflow cb" *ngIf="((rowData[col.field] != null) || rowData[col.field] != 'null'); else notFound">
{{rowData[col.field]}}
</div>
<ng-template #notFound>
-
</ng-template>
</ng-container>
</td>
<td>
<button class="rowBtns" (click)="openDialog(rowData.Address)">
<img src="assets/recent activities/callBack.svg">
</button>
</td>
<td>
<button (click)="setExpandedData(rowData.WrapUp,rowData.Note)" class="dropDownArrowBtn"
type="button" pButton [pRowToggler]="rowData"
[icon]="expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'">
</button>
</td>
</tr>
<div style="height: 10px;"></div>
</ng-template>
</div>
<!-- Row Expension Content-->
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td [attr.colspan]="columns.length + 2" style="padding: 0px; background: none;">
<div class="expandedContianer" [@rowexpansionTrigger]="'active'">
<div class="expandedWrapups">
<div class="title robotoBold">Wrap-ups</div>
<div class="tilesWrapper">
<div *ngFor="let wrapup of expandedWrapupCodes">
<div class="tile"> {{wrapup}} </div>
</div>
</div>
</div>
<div class="seperator"></div>
<div class="expandedTags">
<div class="title robotoBold">Tags</div>
<div class="tilesWrapper">
<div *ngFor="let tag of expandedTagCodes">
<div class="tile"> {{tag}} </div>
</div>
</div>
</div>
</div>
<div class="notes" [@rowexpansionTrigger]="'active'">
<p><strong>Notes:</strong> {{notes}}</p>
</div>
</td>
</tr>
</ng-template>
<!-- Notes -->
</p-table>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)