如何在离子按钮上设置条件

Question

我有ecommerece页面的代码。如果某人选择了任何内容，我想使用一个按钮，然后在该按钮上显示“删除文本”，否则默认名称应为“添加到购物车”。我的代码如下

<button
                *ngIf="!added"
                (click)="addToCart(cItem.id,i)"
                class="btn btn-primary"
              >
                Add to cart
              </button>
              <button
                *ngIf="added"
                (click)="removeitem(cItem.id,i)"
                class="btn btn-primary"
              >
                Remove
              </button>

            </div>

.ts文件是

addToCart(index,i) {debugger;
    this.added=true;
    this.dynamicArray.push(index);
    this.toasterService.Success('Item Added Successfully')
    return true;
  }
  removeitem(item: any,i) {debugger;
    this.added=false;
    const index = this.categoriesItem.findIndex(x => x.id === item);
   this.categoriesItem.splice(index, 1);
   console.log(this.added)
  }

Answer 1

您可以简单地这样做

<button (click)="checkCart(cItem.id,i)"class="btn btn-primary">{{ added == true ? 'Remove' : 'Add To cart' }}  </button>

.ts

checkCart(index,i) {
    if(this.added){
        const index = this.categoriesItem.findIndex(x => x.id === item);
        this.categoriesItem.splice(index, 1);
    }
    else{
        this.dynamicArray.push(index);
        this.toasterService.Success('Item Added Successfully')
        return true;
        this.added = true;
    }
}