如何使控件正常工作以及在另一个分页中导航时

Question

我按照这个来使用滑块。当我转到下一页时，控制器出现问题。在首页上，控制器运行良好，当我转到第二页时，重复相同的值。因此，如果在第 1 页上，第一行中的产品 1 处于活动状态，即使在第二页上，第一行中的产品也是活动的。但实际上该产品在第二页上未激活。同样的事情在其他页面上重复。第一行的每一页都处于活动状态。我认为问题出在我的代码中。 DEMO 请按照我下面的代码：

  populateFormGPS() {
    this.ws.getAllGpss().subscribe(
      gpss => {
        this.gpss = gpss
        console.log(gpss)// all value arrive ok
        let controls = {
          'gps_id': new FormControl('', Validators.required)
        };

        for (let i = 0; i < this.gpss.length; i++) {
          controls['gps_actived-' + i] = new FormControl(this.gpss[i].gps_actived === 1, Validators.required)
        }
        this.acitveGPSForm = new FormGroup(controls);
        this.patchForm();
      }
    )
  }

  patchForm() {
    this.acitveGPSForm.patchValue({
      gps_id: this.gpss.map(x => x.gps_id),
    });
  }

Html代码：

<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>

请问如何解决这个问题？

谢谢

Answer 1

这是因为您的控件名称是基于本地索引而不是Id。因此，当您的行被过滤以显示每页 n 个结果时，您的行 n 将具有索引 0，因此它将重用与实际行 0.

相同的表单控件

在app.component.ts中替换

controls['active-'+i] = ...

和

controls['active-'+this.homeboxsp[i].homeboxpackage_id] = ...

并在 app.component.html 上替换

formControlName="active-{{i}}"

和

formControlName="active-{{item.homeboxpackage_id}}"

Modified stackblitz

如何使控件正常工作以及在另一个分页中导航时

How to make controls to works correctly and when navigate in another paginate

angular

typescript

pagination

angular5

slidetoggle