Question

我的Angular2应用中的*ngFor数组中有一个按钮元素。

按钮的结构是：

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

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

当我点击它时，我需要删除范围.text内的文字并将其他内容放入其中，说<span class="text"> Added! </span>不显示.price范围插值。

我尝试按以下方式制作：

<button [textContent]="isPressed? 'Added!' : 'Add me' "></button> 并在类中声明相应的属性，如：

private isPressed = false;

它运行正常，但问题是它同时更改所有按钮，我只需要更改单击的按钮。

使其正常工作的正确方法是什么？

Answer 1

无论如何，您可能会在某处存储添加的产品。使用此信息显示正确的按钮标签，例如：

<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)和isProductAdded(product)。

Answer 2

根据评论中的建议，您应该在产品项目本身上保留选定的标记。这样你就可以在模板中做这样的事情：

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

在控制器中：

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
}

单击Angular2更改按钮外观

2 个答案: