离子3 /角4 - 离子范围内的一个对多个NG-模型

Question

功能我得到

<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> 

我想创建功能，以增加附加按钮来增加和减小值和减小值2个的离子范围滑块范围

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

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

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

Answer 1

这里的情况是，您使用的是添加相同的功能和减去2个不同的滑块。而你并不需要通过在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

希望节省一些代码行这有助于

Answer 2

有一种更灵活的方式来做到这一点，如果你不希望有你的函数添加的情况下（假设您在您的模板10米范围）：

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

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

然后在你的模板，通过属性名为一个字符串：

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