Angular4：ERROR TypeError：訪問length屬性時無法讀取未定義的屬性“length”

Question

我正在進行角度4的分配，我不熟悉它，我正在為mat-table應用分頁，在它中遇到一些問題，而我打印數據到控制台它顯示如下

而我試圖應用dataSource.data.length，得到以下錯誤。

WellComponent.html:57 ERROR TypeError: Cannot read property 'length' of undefined
    at Object.View_WellComponent_0._co [as updateDirectives] (WellComponent.html:60)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
    at checkAndUpdateView (core.es5.js:12255)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callViewAction (core.es5.js:12620)
    at execEmbeddedViewsAction (core.es5.js:12578)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12620)

我可以在這方面獲得幫助，我應該如何訪問該長度屬性。

零件：

    import { MatPaginator } from '@angular/material';
    import { DataSource } from '@angular/cdk/collections';
    import { Component, OnInit,ViewChild,ChangeDetectorRef } from '@angular/core';
    import { WellService } from '../services/well.service';
    import { Well } from '../well/well';
    import {  Observable  } from 'rxjs/Rx';
    import { BehaviorSubject } from  'rxjs/BehaviorSubject';
    import 'rxjs/add/operator/startWith';
    import 'rxjs/add/observable/merge';
    import 'rxjs/add/operator/map';



    @Component({
      selector: 'app-well',
      templateUrl: './well.component.html',
      styleUrls: ['./well.component.css'],
      providers:[WellService]
    })



    export class WellComponent implements OnInit {
      title = 'Wells';
      header:string;  
      displayedColumns = ['active', 'company', 'country', 'well','wellbore'];
      public dataSource: WellDataSource | any;
      obs:any;

      @ViewChild(MatPaginator) paginator : MatPaginator;

      constructor(private wellService:WellService) {

        this.header='assets/images/BHI_header_logo_bd.png'  

       }

       ngOnInit() {
        this.obs = this.wellService.getWells();
        this.dataSource = new WellDataSource(this.obs, this.paginator);

      }

      }

      export class WellDataSource extends DataSource<any> {

      constructor(private _obs: any, private _paginator: MatPaginator) {
        super();
      }

      connect(): Observable<any[]> {
        const displayDataChanges = [
          this._obs,
          this._paginator.page,
        ];

        return this._obs.flatMap(x => {
          return Observable.merge(...displayDataChanges).map(() => {
            const data = x.slice();
            console.log(data);
            const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
            console.log(startIndex);
            console.log(this._paginator.pageSize)
            console.log(this._obs);
            console.log(x.slice());
            return data.splice(startIndex, this._paginator.pageSize);
          });
        })
      }

        disconnect() {}
      }


**HTML:**

<div>
  <div class="image"><img  [src]="header" ></div>

  <div class="w3-display-left">
  <nav>
     <li><a routerLink="/wells" routerLinkActive="active">My Wells</a></li>
      <li><a routerLink="/dev" routerLinkActive="active">Well Management</a></li>
      <li><a routerLink="/dev" routerLinkActive="active">Admin Tools</a></li>
  </nav>
  <div class="w3-display-right">
    <button mat-button>Reset</button>
    <button mat-button>Refresh</button>
    <button mat-button>View Wireline</button>
    <button mat-button>Chat</button>
    <button mat-button>View Seismic</button>
    <button mat-button>Alerts</button>

  </div>


  <br>
  <br>
   <div> 
        <mat-table #table [dataSource]="dataSource">
    <!-- Active -->
    <ng-container matColumnDef="active">
      <mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.active}} </mat-cell>
    </ng-container>

    <!-- Company -->
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.company}} </mat-cell>
    </ng-container>

    <!-- Country -->
    <ng-container matColumnDef="country">
      <mat-header-cell *matHeaderCellDef>Country</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.country}} </mat-cell>
    </ng-container>

    <!-- Well -->
    <ng-container matColumnDef="well">
      <mat-header-cell *matHeaderCellDef> Well </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.well}} </mat-cell>
    </ng-container>


        <!-- Wellbore -->
        <ng-container matColumnDef="wellbore">
          <mat-header-cell *matHeaderCellDef> Wellbore </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.wellbore}} </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
  [length]="dataSource.data.length"
  [pageIndex]="0"
  [pageSize]="25"
  [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
</div> 
<div>    
    <router-outlet></router-outlet>
    </div>

Answer 1

該錯誤是因為您嘗試在可用之前訪問數據

嘗試使用安全操作員：

dataSource.data?.length

要么

在構造函數中進行一些初始化

dataSource.data = [];

---

根據你的代碼將[length]="dataSource.data.length"更改為[length]="obs.data?.length" ，如下所示：

<mat-paginator #paginator
  [length]="obs.data?.length"
  [pageIndex]="0"
  [pageSize]="25"
  [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Answer 2

初始化數組導致錯誤消失，但表中的數據永遠不會更新 - 它是空白的。 添加問號（即dataSource.data?.length）不起作用，因為還有其他地方預計不會被定義。

有些孩子告訴我嘗試一下BehaviorSubject。 它們是一個始終具有價值的Observable。 訂閱時，您將獲得最新價值。 他們也是觀察者，你可以告訴他們下一個值是什么。 在這里閱讀更多。

http://reactivex.io/rxjs/manual/overview.html#behaviorsubject

我把dataSource.data變成了一個BehaviorSubject，就像孩子告訴我的那樣，初始值[]然后告訴它（通過next（））當值改變時。

並且，因為我正在進行排序和分頁，我必須更新該代碼以使用this.data.getValue（）而不是this.data。

Answer 3

我通過結合兩種方法解決了這個問題

a）安全的操作員

[長度] = “dataSource.data?.length”

b）正確初始化數據源（避免切片錯誤）

ngOnInit() {
  this.dataSource = new EmplTblDataSource(this.paginator, this.sort);
  this.dataSource.data=[];
}

然后，我在OnChanges方法中更新表內容