angular - Cambiar la apariencia del botón al hacer clic Angular2

Tengo un elemento botón en un array *ngFor en mi aplicación Angular2.

La estructura del botón es:

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

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

Cuando hago clic en él, necesito eliminar el texto dentro del span .text y poner algo más dentro, digamos <span class="text"> ¡Añadido! </span> sin mostrar la interpolación del span .price.

Intenté hacerlo de la siguiente manera:

<button [textContent]="isPressed? '¡Añadido!' : 'Agrégame' "></button> Y declara la propiedad correspondiente en la Clase así:

private isPressed = false;

Funciona bien, pero el problema es que cambia todos los botones simultáneamente, y necesito cambiar solo el que se hace clic.

¿Cuál es la manera correcta de hacer que funcione correctamente?

Respuesta #1

Probablemente almacenarás los productos añadidos en algún lugar de todos modos. Usa esta información para mostrar la etiqueta correcta del botón, por ejemplo:

<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) e isProductAdded(product) necesitarían ser definidos en tu Componente.

Respuesta #2

Como se sugiere en los comentarios, deberías mantener la bandera seleccionada en el propio artículo del producto. De esta manera, puedes hacer algo como esto en la plantilla:

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

Y en el controlador:

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
}