在定义的元素上使用 slice 时遇到问题

Question

我正在使用 Angular 9 并尝试实现分页。我收到以下错误：

ERROR TypeError: Cannot read property 'slice' of undefined

我的组件代码：

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator, PageEvent } from '@angular/material/paginator';
    import { MatTableDataSource } from '@angular/material/table';
    
    import { TestResult } from '../models/testResult';
    import { TestResultService } from '../test-result/test-result.service';
    
    @Component({
      selector: 'app-test-result-list',
      templateUrl: './test-result-list.component.html'
    })
    
    export class TestResultListComponent implements OnInit {
    
      testResults: TestResult[];
      dataSource: MatTableDataSource<TestResult>;
      displayColumns = ["tagNo", "testStart", "unitTestId", "isApproved", "valveTestEnvironment"];
    
      length = 100;
      pageSize = 10;
      pageSizeOptions = [1, 2, 5, 10];
    
      @ViewChild(MatPaginator) paginator: MatPaginator;
      pageEvent: PageEvent;
    
    constructor(private readonly testResultService: TestResultService) { }
    
      loadData(pageIndex, pageSize)
      {
        this.dataSource = new MatTableDataSource<TestResult>(this.testResults.slice(pageIndex, pageIndex + pageSize));
      }
    
      ngOnInit(): void {
        this.testResultService.getTestResults().subscribe(result => this.testResults = result);
        this.loadData(0, this.pageSize);
      }
    }

我使用了带有 this.testResults 的虱子，它已经被定义为 TestResult 类型的数组。

Answer 1

testResults 变量被异步赋值。在调用 loadData() 函数时，尚未为 testResults 分配任何值。所有直接依赖于它的语句也应该是异步的，即它们应该在订阅回调中。

ngOnInit(): void {
  this.testResultService.getTestResults().subscribe(result => {
    this.testResults = result;
    this.loadData(0, this.pageSize);     // <-- inside subscription
  });
}

您可以了解有关异步数据的更多信息here。

在定义的元素上使用 slice 时遇到问题

Getting issue with slice on defined element

pagination

undefined

slice

angular