Typescript 为什么要从material.don'；不行？（五）

我有分页的数据列表，支持自定义每页的金额项目。首先，我使用from

material.angular.io

。 但在我的代码中，分页不起作用。角度丢失分页对象。当我更改每页的

项目时

从IU到todo的值。分页设置不起作用，我在页面上有2000个元素。来自服务器的所有数据在一个表页上呈现

<div *ngIf="dataIsLoaded">
  <div class="example-container mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ID</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="ip">
        <mat-header-cell *matHeaderCellDef mat-sort-header> IP</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.ip}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="password">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Password</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.password}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="startDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Start Date</mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.activatedDate}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="endDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> End Date</mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.deactivatedDate}}</mat-cell>
      </ng-container>
      <!-- Detail button -->
      <ng-container matColumnDef="detail">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Detail</mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color">
          <button mat-raised-button color="primary" (click)="getDetail(row.id)">Detail</button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;">
      </mat-row>
    </mat-table>

    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 25]"
                   [showFirstLastButtons]="true">
    </mat-paginator>

  </div>
</div>

身份证件
{{row.id}}
知识产权
{{row.ip}}
密码
{{row.password}}
开始日期
{{row.activatedDate}
结束日期
{{row.deactivatedate}}
细节
细节

和TS方面：

export class VdsListComponent implements OnInit, AfterViewInit {
  displayedColumns = [
    'id',
    'ip',
    'password',
    'startDate',
    'endDate',
    'detail'
  ];
  dataSource: MatTableDataSource<Vds>;
  filterForm: FormGroup;
  dataIsLoaded = false;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private vdsService: VdsService) {
  }

  ngOnInit() {
    this.filterForm = new FormGroup({
      'ip': new FormControl(null, []),
      'id': new FormControl(null, []),
      'dateFrom': new FormControl(null, []),
      'dateTo': new FormControl(null, [])
    });

    this.vdsService.getVds().subscribe((vds: Vds[]) => {
      this.dataSource = new MatTableDataSource(vds);
      this.dataSource.paginator = this.paginator;
      this.dataIsLoaded = true;
    });
  }

}

导出类VdsListComponent实现OnInit，AfterViewInit{
displayedColumns=[
“id”，
"知识产权",，
“密码”，
“开始日期”，
“结束日期”，
“细节”
];
数据源：MatTableDataSource；
filterForm：FormGroup；
dataIsLoaded=false；
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
构造函数（专用vdsService:vdsService）{
}
恩戈尼尼特（）{
this.filterForm=新表单组({
“ip”：新的FormControl（null，[]），
“id”：新的FormControl（null，[]），
“dateFrom”：新的FormControl（null，[]），
“dateTo”：新的FormControl（null，[]）
});
this.vdsService.getVds（）.subscribe（（vds:vds[]）=>{
this.dataSource=新MatTableDataSource（vds）；
this.dataSource.paginator=this.paginator；
this.dataIsLoaded=true；
});
}
}

现在不控制台错误

---

帮助我理解代码不工作的原因并修复它。

使用setter和初始化

数据源解决问题

：

dataSource: MatTableDataSource<Vds> = new MatTableDataSource([]);

paginator: MatPaginator;

@ViewChild(MatPaginator)
set appBacon(paginator: MatPaginator) {
  this.paginator = paginator;
  this.dataSource.paginator = this.paginator;
}
constructor(private vdsService: VdsService) {
}
ngOnInit() {   
  this.filterForm = new FormGroup({
    'ip': new FormControl(null, []),
    'id': new FormControl(null, []),
    'dateFrom': new FormControl(null, []),
    'dateTo': new FormControl(null, [])
  });

  this.vdsService.getVds().subscribe((vds: Vds[]) => {
      this.dataSource = new MatTableDataSource(vds);
      this.dataIsLoaded = true;
    });
}

dataSource:MatTableDataSource=新的MatTableDataSource（[]）；
paginator:MatPaginator；
@ViewChild（MatPaginator）
设置appBacon（分页器：MatPaginator）{
this.paginator=paginator；
this.dataSource.paginator=this.paginator；
}
构造函数（专用vdsService:vdsService）{
}
ngOnInit（）{
this.filterForm=新表单组({
“ip”：新的FormControl（null，[]），
“id”：新的FormControl（null，[]），
“dateFrom”：新的FormControl（null，[]），
“dateTo”：新的FormControl（null，[]）
});
this.vdsService.getVds（）.subscribe（（vds:vds[]）=>{
this.dataSource=新MatTableDataSource（vds）；
this.dataIsLoaded=true；
});
}

---

感谢JB Niset的耐心）

错误消息说明了一切：您正试图在this.dataSource上设置paginator，但this.dataSource在那一点上是未定义的，因为它只是在稍后初始化，当调用this.vdsService.getVds（）返回的异步可观察对象时发出。@JB niset我更新问题。在开始时，我将paginator设置为ngOnInit（）并没有得到错误，但分页不起作用，我在官方示例中是这样做的-将set paginator移动到ngAfterViewInit（）并得到此错误。我在ngOnInit（）中返回了set paginator。现在控制台已清除，但分页不起作用。一页上的所有数据。分页器需要在那里定义视图，因为它是一个ViewChild。在恩戈尼特还没有这种景色。您最初的代码没有新代码那么糟糕。阅读我在评论中所说的内容，而不是尝试随机的事情。@JB我不明白！在ngOnInit（）中不存在分页器。我需要在生成视图后设置分页器。但是在哪里呢？我想在视图初始化之后调用ngAfterViewInit（）。如何知道ViewChild将被初始化？它是。但是请阅读错误消息，并阅读我的评论。问题不在于分页器未定义。当在ngAfterViewInit中使用时，它是。未定义的Wht是

此数据源

。因此出现错误：

在尝试执行
this.dataSource.paginator=…
时，无法设置未定义的属性'paginator'。