单击Angular2更改按钮外观答案

【问题标题】：Change button appearance on click Angular2单击Angular2更改按钮外观
【发布时间】：2017-02-07 10:31:45
【问题描述】：

我的 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;

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

什么是让它正常工作的正确方法？

【问题讨论】：

而不是isPressed 使用像product.isAdded 这样的语义变量。这样，按钮的状态就会与相关产品绑定。
为什么它不能与 isPressed 一起工作，但与 isAdded 一起工作得很好？请提交您的答案，以便我为您的帮助投票
原因不是措辞，而是product，它指的是按钮相关的特定对象。有很多产品（这就是您需要循环的原因），因此您可以为每个产品保存状态。每个按钮显示一个特定产品的状态。如果您使用像isPressed 这样的通用变量，则只有一个，并且所有按钮都在关注它。下面的答案向您展示了如何调整代码。支持他们:-)

标签： angular button typescript

【解决方案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) 需要在您的组件中定义。

【讨论】：

【解决方案2】：

按照 cmets 的建议，您应该在产品项目本身上保留选定的标志。这样你就可以在模板中做这样的事情：

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

【讨论】：