Question

在我的Angular 4项目中，我希望根据切换按钮的值显示我的2个表中的一个，如果为false则显示第一个表，如果为true则显示第二个表。

我在div中使用了primeng数据表：

<div *ngIf="checked">
  <p-dataTable [value]="models" [rows]="10"[paginator]="true"....
</div>

切换是

    <mat-slide-toggle labelPosition="before" [(ngModel)]="checked">
{{first table }}</mat-slide-toggle>

但是当我点击切换按钮时，我有：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：Expression 检查后发生了变化。以前的价值：＆＃39; false＆＃39;。当前价值：＆＃39; true＆＃39;。

那我怎么能避免这个错误？

这是整个组件：

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-icon"
                        data-background-color="main-theme-color">
                        <i class="material-icons">euro_symbol</i>
                    </div>
                    <div class="card-content">
                        <h4 class="card-title">{{'movement.table.titles.header' |
                            translate }}</h4>
                        <div class="row">
                            <div class="col-md-2 col-md-offset-10">
                                <!-- matTooltip="Like" [matTooltipPosition]="'left'"
                                title="{{'movement.table.tooltips.add' | translate }}"-->
                                <button type="button" class="btn btn-info btn-round pull-right"
                                    (click)="routeToView(['/movements/new'])"
                                    matTooltip="{{'movement.table.tooltips.add' | translate }}"
                                    [matTooltipPosition]="'above'"
                                    [matTooltipShowDelay]="tooltipShowDelay"
                                    [matTooltipHideDelay]="tooltipHideDelay">
                                    <span class="btn-label"> <i class="material-icons">add</i>
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <mat-slide-toggle labelPosition="before" [(ngModel)]="checked">{{'movement.table.toggle.competenceview'
                                | translate }}</mat-slide-toggle>
                            </div>
                            <div class="col-md-2">
                                <label class="pull-right">{{'movement.table.toggle.financialview'
                                    | translate }}</label>
                            </div>
                        </div>

                        <div class="col-md-12" *ngIf="checked">
                            <div class="content table-responsive">
                                <p-dataTable #dt [value]="models" [rows]="defaultPageSize"
                                    [paginator]="true" [rowsPerPageOptions]="pageSizeOptions"
                                    [responsive]="true" resizableColumns="true" [lazy]="true"
                                    [totalRecords]="totalElements" sortField="createdDate"
                                    [sortOrder]="-1" (onLazyLoad)="loadDataIntoTable($event)"
                                    [loading]="loader" reorderableColumns="true"> <p-column
                                    field="createdDate" [sortable]="true"
                                    header="{{'movement.table.headers.date' | translate }}">
                                <ng-template let-col let-date="rowData" pTemplate="body">
                                <span> {{date[col.field] | formatdate | date
                                    :('pattern.datehourmin' | translate)}} </span> </ng-template></p-column> <p-column
                                    field="currencyDate" [sortable]="true"
                                    header="{{'movement.table.headers.currencydate' | translate }}">
                                <ng-template let-col let-date="rowData" pTemplate="body">
                                <span> {{date[col.field] | formatdate | date
                                    :('pattern.date' | translate)}} </span> </ng-template></p-column> <p-column field="description"
                                    header="{{'movement.table.headers.description' |
                            translate }}"
                                    [sortable]="true"> <ng-template
                                    let-movement="rowData" pTemplate="body"> <span
                                    *ngIf="movement.refundId || movement.ticketBundleId"
                                    class="crosslink" (click)="selectDescription(movement)">{{movement.description}}</span>
                                <span
                                    *ngIf="movement.refundId === undefined && movement.ticketBundleId === undefined">{{movement.description}}</span>
                                </ng-template> </p-column> <p-column field="paymentTypeName"
                                    header="{{'movement.table.headers.paymenttypename' |
                            translate }}"
                                    [sortable]="true"></p-column> <p-column field="amount"
                                    header="{{'movement.table.headers.amount' | translate }}"
                                    [sortable]="true"> <ng-template let-col
                                    let-amount="rowData" pTemplate="body"> <span
                                    [style.color]="amount[col.field] < 0 ? 'red' : 'green'">
                                    {{amount[col.field] | currency:'EUR':true}} </span> </ng-template></p-column> <p-column
                                    styleClass="col-button"> <ng-template
                                    let-model="rowData" pTemplate="body">

                                <div class="text-center">
                                    <span><button
                                            class="btn btn-simple btn-success btn-icon edit"
                                            (click)="selectModel(model)"
                                            matTooltip="{{'movement.table.tooltips.view' | translate }}"
                                            [matTooltipPosition]="'left'"
                                            [matTooltipShowDelay]="tooltipShowDelay"
                                            [matTooltipHideDelay]="tooltipHideDelay">
                                            <i class="material-icons">dvr</i>
                                        </button> </span>
                                </div>
                                </ng-template> </p-column> </p-dataTable>

                            </div>
                        </div>

                        <div class="col-md-12" *ngIf="!checked">
                            <div class="content table-responsive">
                                <p-dataTable #dt [value]="models" [rows]="defaultPageSize"
                                    [paginator]="true" [rowsPerPageOptions]="pageSizeOptions"
                                    [responsive]="true" resizableColumns="true" [lazy]="true"
                                    [totalRecords]="totalElements" sortField="createdDate"
                                    [sortOrder]="-1" (onLazyLoad)="loadDataIntoTable($event)"
                                    [loading]="loader" reorderableColumns="true"> <p-column
                                    field="createdDate" [sortable]="true"
                                    header="{{'movement.table.headers.date' | translate }}">
                                <ng-template let-col let-date="rowData" pTemplate="body">
                                <span> {{date[col.field] | formatdate | date
                                    :('pattern.datehourmin' | translate)}} </span> </ng-template></p-column> <p-column
                                    field="currencyDate" [sortable]="true"
                                    header="{{'movement.table.headers.currencydate' | translate }}">
                                <ng-template let-col let-date="rowData" pTemplate="body">
                                <span> {{date[col.field] | formatdate | date
                                    :('pattern.date' | translate)}} </span> </ng-template></p-column> <p-column field="description"
                                    header="{{'movement.table.headers.description' |
                            translate }}"
                                    [sortable]="true"> <ng-template
                                    let-movement="rowData" pTemplate="body"> <span
                                    *ngIf="movement.refundId || movement.ticketBundleId"
                                    class="crosslink" (click)="selectDescription(movement)">{{movement.description}}</span>
                                <span
                                    *ngIf="movement.refundId === undefined && movement.ticketBundleId === undefined">{{movement.description}}</span>
                                </ng-template> </p-column> <p-column field="paymentTypeName"
                                    header="{{'movement.table.headers.paymenttypename' |
                            translate }}"
                                    [sortable]="true"></p-column> <p-column field="amount"
                                    header="{{'movement.table.headers.amount' | translate }}"
                                    [sortable]="true"> <ng-template let-col
                                    let-amount="rowData" pTemplate="body"> <span
                                    [style.color]="amount[col.field] < 0 ? 'red' : 'green'">
                                    {{amount[col.field] | currency:'EUR':true}} </span> </ng-template></p-column> <p-column
                                    styleClass="col-button"> <ng-template
                                    let-model="rowData" pTemplate="body">

                                <div class="text-center">
                                    <span><button
                                            class="btn btn-simple btn-success btn-icon edit"
                                            (click)="selectModel(model)"
                                            matTooltip="{{'movement.table.tooltips.view' | translate }}"
                                            [matTooltipPosition]="'left'"
                                            [matTooltipShowDelay]="tooltipShowDelay"
                                            [matTooltipHideDelay]="tooltipHideDelay">
                                            <i class="material-icons">dvr</i>
                                        </button> </span>
                                </div>
                                </ng-template> </p-column> </p-dataTable>

                            </div>
                        </div>


                    </div>
                </div>
                <!--  end card  -->
            </div>
            <!-- end col-md-12 -->
            <!-- end row -->
        </div>
    </div>
</div>

Answer 1

我使用以下解决方法来避免类似问题。我在构造函数中添加了对org_dashboard_index_path GET /orgs/:org_id/dashboard(.:format) orgs/dashboard#index服务的引用，并将其ChangeDetectorRef方法称为组件构造函数中的最后一个延迟：

detectChanges()

这已经好几次了。如果错误没有消失，您可能必须调试代码并找到发生错误的位置，然后调用检测更改方法。例如，如果您知道错误发生在import { ChangeDetectorRef } from '@angular/core'; .... constructor(...., private cdr: ChangeDetectorRef) { .... setInterval(() => { this.cdr.detectChanges(); }, 1000); }中的特定位置，那么您可能需要修改方法，如下所示：

yourMethod()

切换时如何避免ExpressionChangedAfterItHasBeenCheckedError

1 个答案: