Angular2 - Anzeige HTML-Inhalt auf (klicken Sie auf) Ereignis (in den Warenkorb erhöhen/verringern)

Question

Derzeit habe ich eine Schaltfläche, in der ich einige HTML in dieser Schaltfläche anzeigen möchte, wenn ein Klick ausgeführt wird (es ist im Grunde eine Schaltfläche ADD TO CART Sobald der Benutzer darauf klickt, sollte "- 1 +" angezeigt werden. Der Benutzer kann die Anzahl desselben Artikels im Warenkorb erhöhen oder verringern. Wenn die Zahl unter 0 fällt, sollte " In den Warenkorb“wieder)

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

Und eine Funktion, die ausgelöst wird, wenn ein Klick auf durchgeführt wird (klicken)

 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> 

denke ich, ich einige Angular2/JavaScript-Code innerhalb der save() Funktion, um die gewünschten Ergebnisse hinzufügen müssen zu erreichen; Aufgrund des Mangels an Ressourcen über Angular2 blieb ich jedoch stecken. Ihre Hilfe wird wirklich geschätzt!

Answer 1

In Angular2 injizieren wir kein HTML-Markup aus der Komponentenklasse.

Sie benötigen die * ngIf Richtlinie, so etwas zu verwenden:

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> 

Komponente:

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

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

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