angular - Endre knappens utseende ved klikk Angular2

Jeg har et knapp-element i en *ngFor-array i Angular2-appen min.

Strukturen til knappen er:

<button>
   <span class="price">{{ product.price }}</span>

   <span class="text"> Add me! </span>
</button>

Når jeg klikker på det, trenger jeg å fjerne teksten inne i span .text og legge noe annet inni, for eksempel <span class="text"> Added! </span>, og ikke vise interpolasjonen i .price span.

Jeg prøvde å gjøre det på følgende måte:

<button [textContent]="isPressed? 'Added!' : 'Add me' "></button> Og erklær den tilsvarende egenskapen i klassen som:

private isPressed = false;

Det fungerer fint, men problemet er at det endrer alle knappene samtidig, og jeg trenger å endre bare den som ble klikket.

Hva er den riktige måten å få det til å fungere ordentlig på?

Svar #1

Du vil sannsynligvis lagre produkter du har lagt til et sted uansett. Bruk denne informasjonen til å vise riktig knappetekst, f.eks.:

<button (click)='addProduct(product)'>
   <span class="price" *ngIf="!isProductAdded(product)">{{ product.price }}</span>
   <span class="text">{{ isProductAdded(product) ? 'Added!' : 'Add me!'}}</span>
</button>

addProduct(product) og isProductAdded(product) må defineres i komponenten din.

Svar #2

Som foreslått i kommentarene bør du beholde valgt flagg på selve produktobjektet. På denne måten kan du gjøre noe slikt i malen:

<button (click)="selectProduct(product)">
  <span class="price">{{ product.price }}</span>
  <span class="text">{{ product.selected ? 'Added!' : 'Add me!' }}</span>
</button>

Og i kontrolleren:

selectProduct(product) {
  // You probable want to make HTTP request here to save product
  // and on success set selected flag, or do something else..
  product.selected = !product.selected
}

Relaterte artikler