<div class="panel panel-default"><table class="bordered table-bordered" [mfData]="gpss | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"><头><tr><第>序列号</th><th>IMEI </th>
<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}} 全部</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></节></表单><td>………………</td></tr></tbody><脚><td colspan="5"><mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator></td></tfoot>请问有什么办法可以解决这个问题吗?
谢谢
解决方案
这是因为您的控件名称基于本地索引而不是 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}}"
修改后的stackblitz
I followed this post to use the slider. I have a problem with the controller when I go to the next page. On the front page the controller works very well, when I go to the second page, the same values are repeated. So if on page 1 the product 1 in the first line is active, even on the second page, the product in the first line is active. But really the product is not active on the second page. The same thing is repeated on the other pages. Every page the first line has active. I think the problem is in my code ts.
DEMO
Please follow my code below:
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 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>
Please, any idea, how to solve this problem?
Thanks
解决方案
It's because your control names are based on local indexes instead of Ids. So when your rows are filtered to display n results per page, your row n will have index 0, so it'll reuse the same form control as for actual row 0.
In app.component.ts, replace
controls['active-'+i] = ...
with
controls['active-'+this.homeboxsp[i].homeboxpackage_id] = ...
And on app.component.html, replace
formControlName="active-{{i}}"
with
formControlName="active-{{item.homeboxpackage_id}}"
Modified stackblitz
这篇关于如何使控件正常工作以及在另一个分页中导航时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
