如何在 angular 中处理动态定价计划 table？

Question

我有一个应用程序，用户可以购买四种类型的计划。这些计划来自后端，选择计划后，用户将导航到处理付款的页面。此定价 table 页面可以再次查看，但如果用户购买了任何计划，按钮文本将更改为取消订阅。现在我可以为所有其他计划动态更改按钮文本，但是如果用户取消订阅，我不知道如何处理这个动态按钮文本逻辑。

有一个 stackblitz 链接，但由于数据来自后端，我无法正确演示该功能。 stackblitz

我只需要一种在用户取消计划后将按钮文本改回 'Choose Plan' 的方法。

Answer 1

对于 HTML 你可以这样做：

<div class="perks">
  <div class="d-flex actionButton">
    <button
      type="button"
      *ngIf="planIndex === i"
      (click)="cancelSubscription(plan)">
      Cancel Subscription
    </button> 
    <button
      type="button"
      *ngIf="planIndex !== i"
      (click)="selectSubscription(plan)">

      <span *ngIf="planIndex > i"> Upgrade </span>
      <span *ngIf="planIndex < i"> Downgrade </span>
      <span *ngIf="!planIndex"> Choose plan </span>
    </button>
  </div>
</div>

当您从后端收到订阅时，您必须这样做

 this.planIndex = this.allSubscriptions.findIndex((sub) => sub.isSubscribed);

您可以删除setDynamicButtonText函数

解释：

如果 planIndex 为 null，则所有按钮都是相同的“选择计划”
如果我们得到订阅计划的索引，具有类似索引的元素具有“取消订阅”，较高的具有“降级”，较低的具有“升级”

建议：

永远不要在模板中调用渲染函数 HTML 它将被无限调用并且会产生错误。 Explanation

如何在 angular 中处理动态定价计划 table？

How to handle dynamic pricing plan table in angular?

typescript

ngfor

angular