javascript - ionic 3/angular 4 - 多个 ng 模型的 ionic 范围单一功能

Question

我有 2 个 ionic 范围 slider ，带有用于增加和减少值的附加按钮

<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 个不同的 slider 进行加减运算。而且您不需要将 ngModel 中使用的变量作为参数传递，在您的情况下，您需要传递一个标识符，以便函数知道它需要添加或减去什么变量，所以这样做这个:

<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 中调用函数，从而节省了一些代码行

希望对你有帮助