0

我正在使用 FormContol 在 NgFor 循环中制作 Ng-5 滑块的多个实例。在使用 Ng-x Pagination 进行分页期间，slider 的值会丢失。我想知道如何在分页期间跟踪滑块值以及如何在每次迭代期间为每个滑块动态分配一个新变量以获取/设置值？

HTML：

<form class="form" method="" action="" [formGroup]="registerForm" (ngSubmit)="register()"> 

   <div class="row" *ngFor = "let parameter of parameters | paginate: { currentPage: currentPage, itemsPerPage: itemsPerPage }; let i = index;">

               {{parameter.name}}

     <ng5-slider [options]="options" [formControl]="sliderControl" (userChange)="saveRange($event,i)"></ng5-slider>

   </div>

   <pagination-controls (pageChange)="currentPage = $event"></pagination-controls>

</form>

TS：

 sliderControl: FormControl = new FormControl(0);

  ngOnInit() {
  this.recommendationService.getParameters().subscribe(
    res => {
      this.parameters = res.parameters;
        this.semService.getAllTools().subscribe(
          res => {
            this.tools = res.softwares;
          }, 
          err => {
          });
    }, 
     err => {
   });

  this.registerForm = this.formBuilder.group({
  'slideControl': this.formBuilder.control(''),
  });

  this.sliderControl.setValue(0); //Initializes slider value to 0


  }

我希望获取/设置每个滑块的值。

4

2 回答 2

0

说明： 所以我想要实现的是创建与存储在“参数”数组中的服务返回的行/值的数量一样多的滑块实例。使用表单控件，您必须手动创建与参数一样多的变量。即表单控件SliderControl_1、SliderControl_2、... 有多达50 个参数，效率不高，所以我制作了一个FormArray 来容纳我在其中动态创建和推送FormControls 的滑块。

更新 我也在代码中切换到 Ngb 分页，但它不会影响动态

有一些事情要记住：

  1. ng-5 滑块不绑定到 FormArray，因此使用 ng-5 滑块，您无法在分页期间保存每个滑块的值。为此，我必须使用 HTML 的输入范围滑块（表单数组只绑定到输入），如代码所示；

HTML 代码：

<form class="form" method="" action="" [formGroup]="registerForm" (ngSubmit)="register()">
    <div class="row" formArrayName="slider_list"
        *ngFor="let parameter of parameters | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize; let i = index">
        <div class="row">
            <div class="form-group form-check" [formGroupName]="pageSize * (page - 1) + i">
                <input type="range" class="slider" list="tickmarks" formControlName="value" min="0" max="3" step="1" (change)="saveRange($event,i,page)">
                <div class="sliderticks">
                    <p>0</p>
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </div>
            </div>
        </div>
    </div>


        <div class="submit text-center">
            <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="parameters.length" (pageChange)="scrollUp($event)" class="pagination-primary"> </ngb-pagination>
        </div>
</form>

TS 代码

registerForm: FormGroup;
slider_list: FormArray;
page: number = 1;
pageSize: number = 20;

parameters: Array<any> = [];


ngOnInit() {
    this.recommendationService.getParameters().subscribe(

        async res => {
            this.parameters = res.parameters;
            await this.populate_data();
        },
        err => { });

    this.registerForm = this.formBuilder.group({
        slider_list: this.formBuilder.array([])
    });
    this.slider_list = this.registerForm.get('slider_list') as FormArray;
}

public populate_data() {
    this.slider_list = this.registerForm.get('slider_list') as FormArray;
    //initializing sliders equivalent to parameters with 0
    for (var j = 0; j < this.parameters.length; j++) {
        this.slider_list.push(this.formBuilder.group({
            value: 0,
        }))
    }
}

//offset is absolute index, as in pagination index sets to 0 on every page
var offset = this.pageSize * (page - 1) + index;

//calling these lets you get the slider value at a particular offset
this.slider_list = this.registerForm.get('slider_list') as FormArray;
console.log (this.slider_list.at(offset).value.value);
于 2020-06-26T13:36:55.553 回答
0

在ngFor您拥有的数组中，let i = index; 您可以使用它并将@Input()指令转移到您的滑块组件

于 2019-07-11T11:24:11.523 回答