隐藏 PayPal 按钮

Question

我试图根据我的开关状态隐藏一个 PayPal 按钮。目前，一旦贝宝按钮被渲染，它就会一直停留在那里。无论开关是否重新设置为信用卡

这里是开关：

<p class="heading">Payment Method</p>
      <div class="frame flex-row flex-center">
        <button
          class="flex-column flex-center"
          (click)="paymentMethod = 'creditCard'; dismountPaypal()"
          [ngClass]="
            paymentMethod == 'creditCard' ? 'type-btn-active' : 'type-btn'
          "
        >
          Debit/Credit Card
        </button>
        <button
          class="flex-column flex-center"
          (click)="paymentMethod = 'paypal'; renderPaypal()"
          [ngClass]="paymentMethod == 'paypal' ? 'type-btn-active' : 'type-btn'"
        >
          PayPal
        </button>
      </div>

这是按钮本身：

 <div>
      <div #paypalRef></div>
    </div>

在我的 component.ts 文件中，我有这个来呈现按钮，当在开关中点击 paypal 时会调用此函数：

 @ViewChild("paypalRef", { static: true }) private paypalRef: ElementRef;
  renderPaypal() {
    if (this.paypalButtonRendered != true) {
      window.paypal
        .Buttons({
          style: {
            layout: "horizontal",
            color: "white",
          },
        })
        .render(this.paypalRef.nativeElement);
    }
    this.paypalButtonRendered = true;
  }

我尝试在父 div 组件和按钮本身的 div 上使用 ngIf。这只会导致按钮永远不会显示。如果付款方式是信用卡，我也尝试使用 [ngClass] snd 设置 CSS 样式不显示，但这也不起作用。我现在有点不知所措。任何帮助将不胜感激。

Answer 1

根据 paymentMethod 条件，将样式 display: none; 添加到您不想呈现的按钮。