Angular2 - HTMLコンテンツの表示（クリック）イベント（カートに追加/増減）

Question

現在、私はクリックが行われたときにそのボタンの中にHTMLを表示するボタンを持っています（基本的にはカートに追加ボタンユーザーがそれをクリックすると、「-1 +」と表示され、カート内の同じアイテムの数を増減することができます。または、単に数字が0未満になると、

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

（クリック））、再び「カートに

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

そしてクリックが上で実行される火災の機能を追加

HTML：

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

私が思うに、私は必要な結果を達成するために、保存（）関数内でいくつかのAngular2/JavaScriptコードを追加する必要があります。しかし、Angular2に関するリソースが不足しているため、私は立ち往生しました。あなたの助けは本当に感謝しています！

Answer 1

Angular2では、コンポーネントクラスから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 = ....; 
    } 
} 
    ...