如何使控件正常工作以及在另一个分页中导航时
How to make controls to works correctly and when navigate in another paginate
我按照这个 来使用滑块。当我转到下一页时,控制器出现问题。在首页上,控制器运行良好,当我转到第二页时,重复相同的值。因此,如果在第 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>
请问如何解决这个问题?
谢谢
这是因为您的控件名称是基于本地索引而不是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}}"
我按照这个
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>
请问如何解决这个问题?
谢谢
这是因为您的控件名称是基于本地索引而不是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}}"