Angular 2 Paginierung funktioniert nicht

Ich versuche, angular2-datatable von https://github.com/mariuszfoltak/angular2-datatable/blob/master/README.md in meine Anwendung zu implementieren. Aber aus irgendeinem Grund nimmt die rowsOnPage nicht die Nummer, die ich ihr zugewiesen habe.Angular 2 Paginierung funktioniert nicht

Für z.B. Wenn ich sage, dass 5 Datensätze auf einer Seite angezeigt werden, werden alle Datensätze angezeigt. Ich weiß nicht, was ich vermisse. Kann mir bitte jemand helfen, es zu lösen?

<table class="table table-striped table-hover" [mfData]="products | SearchPipe : searchText" #mf="mfDataTable" [mfRowsOnPage]="5"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <mfDefaultSorter by="gt">GT</mfDefaultSorter> 
 
     </th> 
 
     <th> 
 
     <mfDefaultSorter by="name_e">Name E</mfDefaultSorter> 
 
     </th> 
 
     <th class="no-sort hidden-sm-down"> 
 
     <mfDefaultSorter by="name_z">Name Z</mfDefaultSorter> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr *ngFor="let product of products | SearchPipe : searchText"> 
 
     <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gt}}</a></td> 
 
     <td>{{product.name_e}}</td> 
 
     <td>{{product.name_z}}</td> 
 
     <td> 
 
     <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gt]"> 
 
           Edit 
 
          </a> 
 
     </td> 
 
    </tr> 
 
    <tr *ngIf="!products.length"> 
 
     <td>&nbsp;</td> 
 
     <td colspan="6">No Records Found</td> 
 
    </tr> 
 
    <tr *ngIf="(products | SearchPipe : searchText).length === 0"> 
 
     <td>&nbsp;</td> 
 
     <td colspan="6">No matches</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td colspan="12"> 
 
     <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 15]"></mfBootstrapPaginator> 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
</table>

Quelle

2017-06-06 ZAJ

Ich glaube, Sie Sie ngFor ändern müssen. Im offiziellen Beispiel verwenden sie

<tr *ngFor="let item of mf.data">

Aber Sie haben in ngFor verschiedene Daten setzen

<tr *ngFor="let product of products | SearchPipe : searchText">

Werfen Sie einen Blick auf demo from documentation

Quelle

2017-06-06 06:16:29

Vielen Dank für Ihre Kommentare. Aber wenn ich das mf hinzufüge. vor meinen Produkten, dann werden meine Daten nicht in die Tabelle geladen – ZAJ

Was meinst du mit "von meinen Produkten"? Welchen Fehler haben Sie in der Konsole? Ich denke, dass Sie mf.data explizit verwenden müssen. Nicht 'mf.products' –

Ich bekomme keinen Fehler. In meiner Komponente Klasse habe ich die Produktdaten, die aus dem Backend
'Export Klasse ProductComponent implementiert OnInit {
Titel: String; Produkte: IProduct [] = []; getProducts() { console.log ('getProducts() abgerufene Produkte'); . this.productDataService.getProducts() subscribe ((product_data: IProduct []) => { this.products = product_data; }), (err: any) => console.log (err), () => console.log ('abgerufene Produkte'); } ' – ZAJ

Angular 2 Paginierung funktioniert nicht

Antwort

Verwandte Themen