Primeng 表不显示数据 enableIvy:true

问题描述

最近我将我的应用程序从 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 (将#修改为@)