it-swarm.com.de

Wie kann ich MatPaginator an eine Datenquelle vom Server in einer eckigen Materialtabelle anhängen?

Ich verwende eckige Materialtabelle , um ein Raster in meinem Projekt Angular 5 zu erstellen. Meine Daten stammen aus einer http-Anfrage und sind einer Variablen namens dataSourceNew in der Datei view.ts zugewiesen. Hier hat dataSourceNew dynamischen Inhalt und Struktur und so exportiere ich keine Schnittstelle.

      this.http.get('http://example.org?,{headers: this.headers})
          .subscribe(
          res => { 

           this.displayedColumnsNew = res.record;
           this.dataSourceNew = res.data;
           this.matdatasource = new MatTableDataSource(this.dataSourceNew);
           this.dataSourceNew.paginator = this.paginator;
           console.log("got matdatasource object",this.matdatasource);
      // attached the result of this log below

         });

Ich bin erfolgreich in der Lage, eine Datentabelle mit dieser Syntax in HTML-Datei zu erstellen.

     <div class="example-container mat-elevation-z8">
           <mat-table #table [dataSource]="dataSourceNew">


       <ng-container  *ngFor="let head of tableData.record; let i= index; " matColumnDef="{{head}}" (click)="setClickedRow(ddata) "  [class.active]="ddata[primaryid] == selectedRow">
               <mat-header-cell *matHeaderCellDef> {{tableData.gridhead[i]}} 
                </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element[head]}} </mat-cell>
         </ng-container>


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

Jetzt möchte ich dieser Tabelle eine Paginierung beifügen und habe dies dazu erklärt

 @ViewChild(MatPaginator) paginator: MatPaginator;

Aber wenn ich die Paginierung in HTML wie folgt an Tabelle anhänge,

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true">
  </mat-paginator>

Ich habe den folgenden Fehler in der Konsole und es bricht meine Anwendung.

Ich habe das schon importiert

import {MatPaginator, MatTableDataSource} from '@angular/material';

In der jeweiligen .ts-Datei.

Uncaught Error: Template parse errors:
Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Auch wenn ich this.dataSourcenew protokolliere: Das Paginator-Element dieses Objekts ist leer: Wie kann ich den eckigen Material-Paginator verwenden, ohne eine Schnittstelle zu erstellen?

Update:

Mit Davids Vorschlag: Ich habe MatPaginator zu den Importen des Haupt-App-Moduls hinzugefügt. Jetzt wird der Paginierungsblock perfekt angezeigt.

Die aktuellen Datensätze werden jedoch als "0 von 0" angezeigt. Auch wenn ich 14 Datensätze habe und die Paginierungsfunktionen wie Ändern der Anzahl der Datensätze, Nächste, Vorherige usw. nicht funktionieren. Was mir fehlt

Update 2: Ich habe die Eigenschaft Länge auf Paginator-Tags angewendet. Jetzt funktioniert die Paginierung einwandfrei. Das Problem ist, dass jetzt die Datentabelle die aktuelle Nr. Nicht ändert. von Zeilen.

Update 3: Auf Vorschlag von Pierre Mallet habe ich die notwendigen Änderungen vorgenommen. und jetzt, ohne es explizit zu sagen, wird der gesamte Datensatz aus der API-Antwort abgeleitet. Auch der Paginator ist korrekt mit meiner this.matdatasource = new MatTableDataSource([]); verknüpft. Daher wird bis jetzt keine explizite Codierung durchgeführt, um dies zu erreichen.

Jetzt möchte ich zunächst nur ein paar Datensätze abrufen (sagen wir 20) und dann den Datenbankaufruf von nachfolgenden Anforderungen ausführen, damit ich nicht für alle Datensätze sofort die Datenbank aufrufen muss. Wie kann man das erreichen?

2

Sie müssen warten, bis Ihr Paginator instanziiert ist, bevor Sie ihn mit Ihrer MatTableDataSource "verknüpfen". In der Regel würden Sie AfterViewInit-Hooks anhören, um den Paginator über @ViewChild(MatPaginator) paginator: MatPaginator; zu erhalten. 

Da Ihre Daten jedoch auch asynchron sind, sollten Sie dies tun 

1/Eine leere DataSource 2/füllen und die DataSource auffüllen, wenn Ihre Daten bereit sind 3/den Paginator verknüpfen, nachdem die Ansicht gerendert wurde

Könntest du das versuchen? 

export class YourComponent implements AfterViewInit {

  private this.matdatasource;

  // get refereence to paginator
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor (private http: HttpClient) {
    // 1/ init
    this.matdatasource = new MatTableDataSource([]);
    this.http.get('http://example.org?,{headers: this.headers})
      .subscribe(res => { 
        // 2/ populate with data
        this.matdatasource.data = res.data;
      });
  }

  // 3/ link paginator when empty dataSource is created
  // and paginator rendered
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

}
3
Pierre Mallet

Instanziieren Sie zunächst den Paginator 

@ViewChild(MatPaginator) paginator: MatPaginator;

Füllen Sie dann die dataSource auf

this.matdatasource = new MatTableDataSource([])

Und schlussendlich 

this.dataSource.paginator = this.paginator;

Überprüfen Sie dies für das richtige Verständnis

0
Akitha_MJ