Как сделать так, чтобы элементы управления работали корректно и когда переходить в другой paginate - PullRequest
Новая
       6

Как сделать так, чтобы элементы управления работали корректно и когда переходить в другой paginate

0 голосов
/ 17 мая 2018

Я следовал этому сообщению , чтобы использовать ползунок.У меня проблема с контроллером, когда я перехожу на следующую страницу.На первой странице контроллер работает очень хорошо, когда я перехожу на вторую страницу, те же значения повторяются.Таким образом, если на странице 1 продукт 1 в первой строке активен, даже на второй странице, продукт в первой строке активен.Но на самом деле продукт не активен на второй странице.То же самое повторяется на других страницах.Каждая страница в первой строке активна.Я думаю, что проблема в моем коде TS. 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>

Пожалуйста, любая идея, как решить эту проблему?

Спасибо

1 Ответ

0 голосов
/ 18 мая 2018

Это потому, что ваши имена элементов управления основаны на локальных индексах, а не на идентификаторах.Поэтому, когда ваши строки фильтруются для отображения 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}}"

Модифицированный стек

...