设置离子范围的值但不起作用

Question

我有一个从 0 到 10 的 ion-range，我将默认值设置为 5：question.min = 0 和 question.max = 10 question.value = "5"。步骤为 1 (question.step = 1)。

<ion-item id="{{question.id}}" *ngSwitchCase=types.ratingScalePerso>
  <ion-range value="{{question.value}}" min="{{question.min}}" max="{{question.max}}" step="{{question.step}}"  color="secondary" pin="true" [(ngModel)]="question.answer">
    <ion-label slot="start">{{question.precisionMin}}</ion-label>
    <ion-label slot="end">{{question.precisionMax}}</ion-label>
  </ion-range>
</ion-item>

但是范围选择器保持在 0。是因为我将结果保存在 ngModel 中吗？如果是，我该怎么办？谢谢

Answer 1

根据 Ionic 4 文档，值属性需要是 number。你的 question.value = "5" 是 string.

https://ionicframework.com/docs/api/range

Answer 2

使用下面的代码

在 .html 文件中：

<ion-item id="{{question.id}}">
  <ion-range [(ngModel)]='question.value' min="{{question.min}}" max="{{question.max}}" step="{{question.step}}"  color="secondary" pin="true" [(ngModel)]="question.answer">
    <ion-label slot="start">{{question.precisionMin}}</ion-label>
    <ion-label slot="end">{{question.precisionMax}}</ion-label>
  </ion-range>
</ion-item>

.ts 中的示例数据数组

question: any = {
    id:1,
    value:5,
    min: 0,
    max:10,
    step:1,
    answer:'answer',
    precisionMin:0,
    precisionMax:0
  }

Answer 3

您需要了解 Angular 的工作原理，所以

[(ngModel)]="question.answer"

实际上 ngModel 设置特定组件的值（包括范围）。如果您想使用 value 来代替，您可以删除 ngModel 部分并设置 [value]="precision.value".

https://ionic-v4-19uyfz.stackblitz.io/action-sheet

设置离子范围的值但不起作用

set the value of ion-range but does not work

angular

ionic4