web-dev-qa-db-ja.com

Angularデータソースのあるマテリアルテーブル：ページ付けとフィルターが機能していません

次のangularデータソースプロパティを持つマテリアルテーブルがあります：

<div class="dim">
  <mat-form-field >
    <input matInput class="warn" (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>
<div class="mat-elevation-z2">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.id}}</td>
    </ng-container>

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

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

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

    <ng-container matColumnDef="unit_number_hh">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Number Of units</th>
      <td mat-header *matCellDef="let row">{{row.unit_number}}</td>
    </ng-container>

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

    <ng-container matColumnDef="unit_date_added">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date Added</th>
      <td mat-header *matCellDef="let row">{{row.date_added}}</td>
    </ng-container>
    <tr class="example-expanded-row" 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>

これに対応するTypeScriptは次のとおりです。

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { HttpClient } from 'Selenium-webdriver/http';
import { AuthApiService } from '../../auth-api.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  dataSource:  any;
  displayedColumns: String[]=['unit_id', 'unit_type', 'location_id_auto', 'user_id', 'unit_number_hh', 'unit_status', 'unit_date_added'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

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

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

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

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource = Object.values(data);
      },
      (error)=>
      {
        console.log("Error: "+error)
      }
    )

  }

}

データを取得して正常に表示されていますが、6つのレコードがあり、最初のページに5つ、他のページに1つを表示する代わりに、6つの行すべてが最初のページに表示され、フィルターがまったく機能していません。

これが plunker です。代わりにデータの配列を追加できます。

次のエラーがあります：

エラーTypeError：RegistrationComponent.Push ../src/app/dashboard/registration/registration.component.ts.RegistrationComponent.ngOnInit（registration.component.ts:20）で未定義のプロパティ 'paginator'を読み取ることができません

enter image description here

angularpaginationdatasourceangular6angular-material-6
3
alim1990

関数getUnitData()は非同期であり、this.dataSourceにアクセスした瞬間には実行されません。関数をこれに変更します

getUnitData() {
    this.auth.getUnitDataService().subscribe(
      (data) => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      (error) => {
        console.log("Error: "+error)
      });
}

hTMLも調整します

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

dataSourceタイプはMatTableDataSourceである必要があります

あなたはこのように宣言しました、

dataSource = new MatTableDataSource();
1
Aniket Avhad

HTMLバインドページネーター

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

Tsファイル内

  dataSource = new MatTableDataSource<any>();

追加する必要があります

   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }
1
Nenad Radak