隐藏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文件中，我有这个来呈现按钮，当贝宝在开关中被点击时，这个函数会被调用：

@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;添加到不希望渲染的按钮中。