Question

当填充需要在函数内部填充的数组时，分页器无法正常工作在ngInit中填充它时，它可以正常工作-这看起来很像个bug吗？有什么想法吗？

查看与此情况下创建的新组件

test.html

    <div class="p-col-1">
    <button pButton type="button" label="GET" (click)="get()"></button>
  </div>
<div class="p-grid">

  <div class="p-col">

        <p-table [value]="workingArr" [rows]="2" [paginator]="true" [responsive]="true" autoLayout ="true" >
          <ng-template pTemplate="header">
            <tr>
              <th>testPaginator</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-workingArr>

                <tr>
                    <td>{{workingArr}}</td>
            </tr>
          </ng-template>
        </p-table>
  </div>
</div>


<div class="p-grid">
  <div class="p-col">

        <p-table [value]="notworkingArr" [rows]="2" [paginator]="true" [responsive]="true" autoLayout ="true" >
          <ng-template pTemplate="header">
            <tr>
              <th>testPaginator</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-notworkingArr>

                <tr>
                    <td>{{notworkingArr}}</td>
            </tr>
          </ng-template>
        </p-table>
  </div>
</div>

和test.ts

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  workingArr: string[]=[];
  notworkingArr: string[] =[];


  constructor() { }

  ngOnInit() {

    for(let a=0 ;a< 10 ; a++ )
    {

      this.workingArr[a] =  'test' +a;
      console.log('in init');
    }
  }

  get() {

    for(let b=0 ;b< 10 ; b++ )
    {
      this.notworkingArr[b] =  'test' +b;
      console.log('in get');
    }
  }
}

这是单击获取按钮后的结果

Answer 1

如果您以这种方式更改源数组e.g.，则必须在reset()组件上调用TurboTable：

<div class="p-col-1">
    <button pButton type="button" label="GET" (click)="get(); table.reset()"></button>
</div>
...    
<div class="p-grid">
  <div class="p-col">

        <p-table #table [value]="notworkingArr" [rows]="2" [paginator]="true" [responsive]="true" autoLayout ="true" >
          <ng-template pTemplate="header">
            <tr>
              <th>testPaginator</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-notworkingArr>

                <tr>
                    <td>{{notworkingArr}}</td>
            </tr>
          </ng-template>
        </p-table>
  </div>
</div>

Answer 2

只需分配给一个临时数组，然后将其分配给workingArr，而不是遍历它们。

角质p表分页不起作用

2 个答案: