Question

由于我想设置要显示的记录数限制，因此我能够在垫子表上显示记录，因此我使用了垫子分页器。但这不起作用

vendoraction.component.html

<div class="purchases-style">
    <div>
        <table mat-table [dataSource]="displayvendors" class="mat-elevation-z1">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="changeColumn">
            <th mat-header-cell *matHeaderCellDef> Change Column </th>
            <td mat-cell *matCellDef="let element"> {{element.changeColumn}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['id','changeColumn'"></tr>
        <tr class="rowhover" (click)="displayData(row.id)" mat-row *matRowDef="let row; columns: ['id','changeColumn']"></tr>
        </table>

         <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" class="mat-elevation-z1">
         </mat-paginator>
     </div>

     <router-outlet></router-outlet>

</div>

vendor-action.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

import { ApiService } from 'src/app/api.service';
import { Displayvendor } from './displayvendor';



@Component({
  selector: 'app-vendor-action',
  templateUrl: './vendor-action.component.html',
  styleUrls: ['./vendor-action.component.css']
})
export class VendorActionComponent {

  displayvendors : any
  constructor(private router:Router,public apiService:ApiService){}
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
      });

      this.displayvendors.paginator=this.paginator;
  }

  displayData(id)
  {
    this.router.navigate(["/home/vendor-action/approval",id]);
  }
}

我得到了错误：

错误TypeError：无法设置未定义的属性“ paginator”

Answer 1

尝试在subscription方法内为displayvendors设置分页器选项。 api调用是异步的，因此当您尝试为其设置paginator属性时，该对象为空。

ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
        this.displayvendors.paginator=this.paginator;
      });
  }

Answer 2

尝试将其放在这样的订阅方法中：

ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
        this.displayvendors.paginator=this.paginator;
      });
  }

错误TypeError：无法设置未定义错误的属性“ paginator”

2 个答案: