获取在 ngfor 中定义的多个 ngx-slider 对象的值

Question

我希望用户通过范围滑块对几个问题进行评分，从非常不同意到非常同意。由于我有几个问题，所以我使用 ngFor 来显示问题并生成相应的滑块，如下所示：

<table class="table" id="statementTable">
  <tbody *ngFor="let item of statements.slice(index, index+3);  let i = index">
    <tr> <td>{{i+1}}.</td>  <td>{{ item.text }} </td>  <td></td> <td></td> </tr>
    <tr>
        <td> Disagree </td>
        <td> <ngx-slider class="form-range" [(value)]="value" [options]="options"  id="slider{{i+1}}"></ngx-slider> </td>
        <td> Agree </td>  <td>{{value}}</td>
    </tr>
  </tbody>
</table>

我想在用户移动滑块时在旁边显示每个滑块的值。但是，目前如果用户移动其中一个滑块，其余滑块也会移动并获得相同的值！我怎样才能让它们独立，这样每一个只有在用户改变它时才会改变，并且每个都显示出自己的价值。

我正在使用 Angular10，这里是 .ts 文件：

import { Component } from '@angular/core';
import { Options } from '@angular-slider/ngx-slider';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 constructor() { }
 statements = [
       { text: 'statement1' },
       { text: 'statement2' },
       { text: 'statement3' },
       { text: 'statement4' },
       { text: 'statement5' },
 ];

 value: number = 4;
 options: Options = {
   floor: 1,
   ceil: 7
 };
}

提前致谢！

Answer 1

您可能想尝试在滑块中使用 [(ngModel)]，并使用 rating 之类的键绑定值。

Answer 2

当您移动一个滑块时，所有滑块都获得相同值的原因是因为它们都绑定到同一个全局属性 [(value)]="value".

您非常接近解决方案。但是，在代码中设置 id 并不是 Angular 的方式。

<td> <ngx-slider class="form-range" [(value)]="value" [options]="options"  id="slider{{i+1}}"></ngx-slider> </td>

将 value 属性添加到您的 statements 数组。

statements = [
       { text: 'statement1', value: 4 },
       { text: 'statement2', value: 4 },
       { text: 'statement3', value: 4 },
       { text: 'statement4', value: 4 },
       { text: 'statement5', value: 4 },
 ];

然后改成这样

<td> <ngx-slider class="form-range" [(value)]="item.value" [options]="options"  id="slider{{i+1}}"></ngx-slider> </td>

这样每个 ngx-slider 都绑定到单个项目。

获取在 ngfor 中定义的多个 ngx-slider 对象的值

Get values of multiple ngx-slider objects that are defined in ngfor

angular

slider

ngfor