web-dev-qa-db-ja.com

エラーTypeError：未定義のプロパティ 'paginator'を設定できません

テーブルを使用してテーブルを作成していますAngular参考資料このサンプルを使用しています https://material.angular.io/components/table/examples

ここに私がこれまで持っているものがあります：

HTML

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>


      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>


      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>


      <ng-container matColumnDef="release">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
        <td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
      </ng-container>


      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
      </ng-container>

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

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

コンポーネント.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-tv-shows',
  templateUrl: './tv-shows.component.html',
  styleUrls: ['./tv-shows.component.scss']
})
export class TvShowsComponent implements OnInit {
  displayedColumns: string[] = ['name', 'id', 'release', 'description'];
  dataSource: any;
  @ViewChild(DatatableComponent) table: DatatableComponent;
  constructor(private moviesService: MoviesService) {
    this.moviesService.getPopularTVShows().subscribe(res => {
      this.dataSource = res.results;
    });
  }

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

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

アプリを実行すると、データは完全にテーブルに表示されますが、次のエラーが表示されます：

ERROR TypeError: Cannot set property 'paginator' of undefined

したがって、ソート、フィルタリング、ページネーションのいずれも機能しません

ここでいくつかの助けが必要です：

上記のコードで何が間違っていますか？任意の助けをいただければ幸いです。

javascriptangularhtml5typescriptangular-material
8
user9964622

エラーは、this.dataSource.paginatorがまだundefinedのときに、this.dataSourceを割り当てようとしていることを示しています。割り当てを行いますafterそれは初期化されました。

また、ページネーター、ソート、またはフィルターを使用する場合は、MatTableDataSourceクラスを使用する必要があります。 dataSourceとして生データを使用するだけでは不十分です。

ngOnInit() {
  this.moviesService.getPopularTVShows().subscribe(res => {
    // Use MatTableDataSource for paginator
    this.dataSource = new MatTableDataSource(res.results);
                          ^^^^^^^^^^^^^^^^^^
    // Assign the paginator *after* dataSource is set
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}
18
Kim Kern