时间戳

首页 > 解决方案 > 获取在 ngfor 中定义的多个 ngx-slider 对象的值

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

问题描述

我希望用户通过范围滑块对几个问题进行评分，从非常不同意到非常同意。由于我有几个问题，我使用 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
 };
}

提前致谢！

标签： angularsliderngfor

解决方案

您可能想尝试[(ngModel)]在滑块中使用，并将值与诸如评级之类的键绑定。

推荐阅读