mfBootstrapPaginator change my value in switch toggle when navigate in page

[AulonaBinaj]

I have a big problem in my project. Is an inexplicable case. I used mat-slide-toggle that works good, but when I select page 2, not is good. So I demonstrate my problem like in image: In this image1, page 1, you can see that g2 and g3 are checked. In this image2, page2, you can see that g7 and g1109 are checked.

In this image 3 that are all product , you can see that only 2 product are checked, only g2 and g3.

If I checked and product g4 in image 1, automatic in image 2 checked and product g8. Please, what is the problem in my code?

My html code:

<div class="row">
  <div class="col s12 m2">
    <label class="col s12 label-control" style="padding: 0px">Rows on page</label>
    <select class="form-control input-sm" [(ngModel)]="rowsOnPage">
        <option [ngValue]="5">5</option>
        <option [ngValue]="10">10</option>
      <option [ngValue]="20">20</option>
    </select>
  </div>
  <div class="col s12 m4">
    <label class="col s12 label-control" style="padding: 0">Sort by</label>
    <div class="col s6" style="padding: 0">
      <select class="form-control input-sm" [(ngModel)]="sortBy">
       ..................
      </select>
    </div>
    <div class="col s6" style="padding: 0">
      <select class="form-control input-sm" [(ngModel)]="sortOrder">
       ............
      </select>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <table class="bordered table-bordered" [mfData]="gpss | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
    [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
    <thead>
      <tr>
        <th>Serial No. </th>
        <th>IMEI </th>
        <th>SIM no</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data; let i=index">
        <td>{{item.gps_serial}}</td>
        <td>{{item.gps_imei}}</td>
        <td>{{item.gps_sim_iccid}}</td>
        <td>{{item.unit_price}} ALL</td>
        <td>
          <form [formGroup]="acitveGPSForm" class="col s12" *ngIf="auths.findPermission('gpsactivate')">
              <section class="example-section" >
                <mat-slide-toggle formControlName="gps_actived-{{i}}" class="example-margin" [checked]="item.gps_actived ===1" #elem (click)="onActivegps(item.gps_id, item.gps_actived, elem)" >
                </mat-slide-toggle>
              </section>
          </form>
          <td>
         .............
          </td>
      </tr>
    </tbody>
    <tfoot>
      <td colspan="5">
        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
      </td>
    </tfoot>
  </table>
</div>

[shiv-chaturvedi-94]

seems similar to below https://github.com/mariuszfoltak/angular2-datatable/issues/26

[julioaze]

i have the same problem. do you have the solution?

[yuanhsueh]

same issue here... how do we change the style of .pagination tag ??????

[shiv-chaturvedi-94]

on switch toggle, data changes, when the data is a part of the component where the datatable is present.

To avoid this, keep the data in a service. inject the service in the component where datatable is defined. use same data as input to the datatable created

this will ensure that, on switching views, data is not affected, as the data will no more be a part of the component.

On Wed, Feb 13, 2019 at 3:05 AM Yuan notifications@github.com wrote:

same issue here... how do we change the style of .pagination tag ??????

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mariuszfoltak/angular2-datatable/issues/155#issuecomment-462945036, or mute the thread https://github.com/notifications/unsubscribe-auth/AnkTMhjsOkJ7SpAByC3Dw9Kyk4CEmX1wks5vMzOigaJpZM4UDCf- .