Question

目前我有一个按钮，我想在执行点击时在该按钮内显示一些HTML（它基本上是一个ADD TO CART按钮，一旦用户点击它，它应显示“ - 1 + “用户可以增加/减少购物车中相同商品的数量，或者只要数字低于0，就应该再次显示”添加到商品“

constructor() {
this.addBtn = 'Add to cart';
}

在（点击）

上执行点击时触发的功能

      save(){
      this.addBtn = 'Here it should show some html content instead of text only';

    //I wanted to do something like this, but it does not work:
    // this.addBtn = <h3 style="font-weight:700;color:white;">-</h3><span>1</span><h3 style="font-weight:700;color:white;">+</h3>;
      }

HTML：

      <button (click)="save()">{{addBtn}}</button>

我认为，我需要在save（）函数中添加一些Angular2 / JavaScript代码，以实现所需的结果;然而，由于缺乏关于Angular2的资源，我陷入困境。非常感谢您的帮助！

Answer 1

在Angular2中，我们不会从Component Class中注入HTML标记。

您需要使用 * ngIf 指令，如下所示：

<强> HTML：

<button *ngIf="isCartEmpty" (click)="save()">Add to cart</button>
<button *ngIf="!isCartEmpty" (click)="save()">
    <h3 style="font-weight:700;color:white;">{{sign}}</h3><span>{{amount}}</span>
</button>

<强>组件：

    ...
amount: number;
isCartEmpty: boolean;
sign: string;

save(){
    if (this.amount === 0) {
        this.isCartEmpty = true;
    } else {
        this.isCartEmpty = false;

        this.sign = ....;
    }   
}
    ...

Angular2 - 在（单击）事件上显示HTML内容（添加到购物车增量/减量）

1 个答案: