0

我正在构建一个页面，该页面具有来自数据库的动态选项卡，并且每个选项卡都有一个分页（我使用分页控件）。当我选择一个选项卡时，我收到此错误：

ERROR 错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'12'。当前值：'9'.. 在https://angular.io/errors/NG0100 at throwErrorIfNoChangesMode (core.js:6792) 中查找更多信息

如何使用分页控件创建动态选项卡？

我的完整代码

home.html（父级）

<tabset [justified]="true">
        <tab heading="Tab1" (selectTab)="selectCurrenTab($event)">
            <app-older></app-older>
        </tab>
        <tab *ngFor="let data of datas; let index = index"  [heading]="data?.name" >
            <app-tab></app-tab>
        </tab>
    </tabset>

tab.component.ts（子 1）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {
private currentPage = 1;
  private itemsPerPage = 12;

 constructor(private cdref: ChangeDetectorRef  ) { }
  ngOnInit(): void { }
  ngAfterViewChecked(){
    this.cdref.detectChanges();
  }

 onItemsPerPageChange(numberItem) {
    this.itemsPerPage = numberItem;
    this.loadData();
  }
 onPageChange(event) {
    this.currentPage = event;
  }
}

tabs.component.html

<ngx-row *ngFor="let data of datas| paginate: {  itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: itemsTotal }; let i = index;">
  <ngx-col>....</ngx-col>
</ngx-row>
 <div class="row">
    <div class="col-sm-8">
       <pagination-controls  (pageChange)="onPageChange($event)">
       </pagination-controls> 
   </div>
    <div class="col-sm-4">
        <ul class="pagination pull-right float-sm-right">
           <li id="li10" (click)="onItemsPerPageChange(12)">
                <a class="page-link pointer">10</a>
           </li>
            <li id="li15" class="page-item" (click)="onItemsPerPageChange(15)">
                 <a class="page-link pointer">15</a>
            </li>
       </ul>
   </div>
</div>

怎么了？

4

0 回答 0