时间戳

首页 > 解决方案 > 在定义的元素上遇到切片问题

angular - 在定义的元素上遇到切片问题

问题描述

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

错误类型错误：无法读取未定义的属性“切片”

我的组件代码：

    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);
      }
    }

我已经将 lice 与 this.testResults 一起使用，它已经定义为 TestResult 类型的数组。

标签： angularpaginationundefinedslice

解决方案

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

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

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

推荐阅读