ngModel 的 ion-radio-group 问题答案

【问题标题】：Issue with ion-radio-group with ngModelngModel 的 ion-radio-group 问题
【发布时间】：2021-03-10 18:44:54
【问题描述】：

我将 ion-radio-group 与具有隐藏/显示功能的 ngModel 一起使用。下面是我的视图 UI 代码。

<ion-button (click)="showSection()" size="small" >show</ion-button>
<ion-button (click)="hideSection()" size="small" >Hide</ion-button>

<ion-list style="margin-bottom: 0px;" *ngIf="show">
  <ion-radio-group [(ngModel)]="payment.paytype">
    <ion-list-header>
      Select Payment Method
    </ion-list-header>

<ion-item>
  <ion-label>Online</ion-label>
  <ion-radio value="online"></ion-radio>
</ion-item>

   <ion-item>
      <ion-label>Token</ion-label>
      <ion-radio value="token"></ion-radio>
    </ion-item>
 </ion-radio-group>
</ion-list>

这是我在控制器上的隐藏/显示代码。

show:boolean;payment={}

showSection()
{
    this.show = true;
}
hideSection()
{
    this.show = false;
}

当我选择收音机并执行隐藏显示操作时出现问题。我的 UI 冻结。我正在使用 Ionic 4。

注意：如果我没有选择收音机并进行隐藏/显示，则不会出现问题。只有当我选择收音机然后隐藏/显示时才会出现问题。

【问题讨论】：

你能仔细检查你的代码并完全分享吗？目前还不清楚你是如何实现广播组的:(
用户界面是一样的。对于隐藏显示定义了 2 个功能。就是这样。
请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住、投票建议、元评论等。只需解释您的问题，并展示您尝试过的内容、预期的内容以及实际发生的情况。

标签： angular ionic4 ngmodel ion-radio-group

【解决方案1】：

通常，当出现无限循环时，UI 会冻结。特别是在 2 路绑定中，您可能会遇到此类问题。尝试将ion-list 包裹在div 中，并在div 上添加ngIf。你为什么要使用async 函数？没必要。

【讨论】：

是的，我知道正在发生类似无限循环的问题。但我不明白如何。异步我会删除。当我选择收音机时，唯一的问题来了。但我不知道如何处理。