Question

我有2个离子范围滑块，带有额外的按钮来增加和减少值

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal(goalProgress)">
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal(goalProgress)">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal(effortValue)">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal(effortValue)">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

我想创建增加和减少范围值的函数

addRangeVal(val) {
 //increase value of the current range
}

subtractRangeVal(val) {
 //decrease value of the current range
}

我可以将ng-model传递给按钮，以便我可以控制它们吗？目前我只能显示当前值。

Answer 1

这里的情况是你使用相同的功能来添加和减去2个不同的滑块。并且您不需要将ngModel中使用的变量作为参数传递，在您的情况下，您需要传递一个标识符，以便函数知道需要添加或减去的变量，所以这样做：< / p>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal('goalProgress')"> <!-- SEE THAT I'M PASSING THE NAME OF THE VARIABLE AS A STRING -->
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal('goalProgress')">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal('effortValue')">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal('effortValue')">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

和你的TS

public goalProgress: number = 0; // declare your variables as a number
public effortValue: number = 0;

addRangeVal(val) {
  if (val == 'goalProgress'){
    this.goalProgress++;
  } else {
    this.effotValue++;
  }
}

subtractRangeVal(val) {
 if (val == 'goalProgress'){
    this.goalProgress--;
  } else {
    this.effotValue--;
  }
}

但这是一种方式，更简单的方法是直接降低HTML的增长

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="goalProgress--">
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="goalProgress++">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="effortValue--">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="effortValue++">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

如果使用(click)="effortValue++"不起作用，请尝试验证您的变量是否输入为数字（public effortValue:number = 0）或尝试(click)="effortValue = effortValue + 1"，并对其他操作执行相同操作。这样就省去了一些代码行，而不必调用.TS中的函数

希望这有帮助

Answer 2

如果您不想在函数中添加案例（假设您的模板中有10个范围），则可以采用更灵活的方式执行此操作：

addRangeVal(propName) {
    this[propName]++;
}

subtractRangeVal(propName) {
    this[propName]--;
}

然后在模板中，将属性名称作为字符串：

传递

<button color="light" (click)="subtractRangeVal('goalProgress')">

Answer 3

轻松实现的方法：

HTML：

 <ion-range dualKnobs="true" [min]=timeMin [max]=timeMax step="3" 
  snaps="true" [(ngModel)]="time" (ionChange)="setBadge(time)" ></ion-range>

在TS文件中：

 time: any;
 timeMin: any = 100;
 timeMax: any = 200;
 timeMin2: any;
 timeMax2: any;

constructor(){

    this.timeMin2 = this.timeMin;
    this.timeMax2 = this.timeMax;

}

 setBadge(time) {
  this.timeMin2 = time.lower;
  this.timeMax2 = time.upper;
  console.log("min",this.timeMin2);
  console.log("max",this.timeMax2);
}

离子3 /角度4 - 离子范围一个功能用于多个ng模型

3 个答案: