具有离子范围的值数组

Question

我在使用离子范围有困难，我希望它有非线性值，例如:0- 10 - 20 - 30 - 40等等.但更像是:50-100-200-300-400-500-1000-1500等等.类似于特定的值数组，。是否有可能或如何在每次移动时调用.ts方法来动态更改步骤，同时移动旋钮？非常感谢

Answer 1

没有办法定制您的步骤，但有一个解决办法，您可以使用。假设您有以下数组[50, 100, 200, 300, 400, 500, 1000, 1500]，您可以在您的范围更改上使用一个函数来根据您范围内的值在这个数组中选择一个值：

<!-- -->
<ion-badge>{{customSteps}}</ion-badge>
  <ion-item>
    <!-- YOUR max WILL'BE YOUR ARRAY LENGTH - 1 TO GET THE LAST VALUE POSITION -->
    <ion-range min="0" [max]="rangeArray.length - 1" [(ngModel)]="range" (ionChange)="watchRange()" color="secondary">
    <ion-label range-left>50</ion-label>
    <ion-label range-right>1500</ion-label>
  </ion-range>
</ion-item>

在.ts中：

range: number = 0;
customSteps: any;
rangeArray: any[] = [50, 100, 200, 300, 400, 500, 1000, 1500];

constructor(){
  // INITIALIZE YOUR RANGE VALUE
  this.watchRange();
}

watchRange(){
  // IN THIS METHOD YOU'LL CHANGE YOUR customSteps VALUE USING THE RANGE VALUE TO GET
  //A VALUE IN YOUR ARRAY POSITION. customSteps WILL BE USED FOR PRESENTATION AND IN YOUR OTHER METHODS
  this.customSteps = this.rangeArray[this.range];
}

希望这能有所帮助。