角 | Ionic 3 - 如何创建增量减量产品按钮？

Question

我已经阅读了很多教程，但有些东西还不清楚。

我正在尝试创建一个递增递减按钮，但没有成功。

我在一个离子列表中有多个h3。这是我的看法：

<ion-step description="Step1 description" icon="checkmark">
            <div class="apartmentCapabilities" padding>
                <form class="app-form">
                    <ion-list *ngFor="let option of structur; let i = index">
                        <h3>{{ option.people }}</h3>
                        <h3>{{ option.bed}}</h3>
                        <h3>{{ option.bath}}</h3>
                        <h3>{{ option.night}}</h3>
                        <ion-item>
                            <ion-icon name="remove-circle" (click)="decrement()"></ion-icon>
                            {{currentNumber}}
                            <ion-icon name="add-circle" (click)="increment()"></ion-icon>
                        </ion-item>
                    </ion-list>
                </form>
            </div>
        </ion-step>

我的目标是为每个 h3 设置一个递增递减按钮，类似于

“有多少人：- 1 +”。

这是我的.ts：

private currentNumber = 0;

constructor() {}

private increment() {
    this.currentNumber++;
}

private decrement () {
    if(this.currentNumber>0){
        this.currentNumber--;}
}

感谢任何帮助。 祝你有美好的一天

Answer 1

尝试从您的函数中删除private。它应该是公开的，这样模板就可以访问您的功能。

private currentNumber = 0;

constructor() {}

increment() {
    this.currentNumber++;
}

decrement () {
    if(this.currentNumber>0){
        this.currentNumber--;}
}