使用功能清除收音机列表 - 离子答案

【问题标题】：Clearing a radio list with a function - ionic使用功能清除收音机列表 - 离子
【发布时间】：2018-10-31 13:25:03
【问题描述】：

我正在构建一个离子应用程序。在其中一页上，我有一个电台列表。现在的问题是，当我进入下一个屏幕然后弹回时，收音机列表没有被清除，这是糟糕的 UX。我看到了两种可能的方法：

要么是取消选中我的列表的函数（然后我可以将其放入 ionViewWillEnter）——这将是最好的。我玩了[checked]，但似乎没有太大帮助。
或不缓存此特定页面的方法

我已经搜索了很多方法，但没有找到太多。有什么想法吗？

我的清单的代码是：

        <ion-list radio-group class="size-list">
            <ion-list-header class="size-list-header" text-center>
                {{"Size and prices" | translate}}
            </ion-list-header>
            <ion-item *ngFor="let item of menuItems.price; let i= index" class="size-list-item">
                <ion-label *ngIf="item.specialPrice"> {{item.pname}}
                    <span class="cut">
                        ${{item.value}}
                    </span>
                    <span class="offer-p">
                        ${{item.specialPrice |number:0}}
                    </span>
                </ion-label>
                <ion-label *ngIf="!item.specialPrice">
                    {{item.pname}} ${{item.value}}
                </ion-label>
                <ion-radio class="checked" [checked]="isChecked==true" (ionSelect)="sizeOptions(item)"></ion-radio>   
            </ion-item>
        </ion-list>

【问题讨论】：

ionViewWillEnter 有道理，为什么不起作用？
好问题。我尝试使用 [checked] 属性，但它似乎只能以一种方式工作。含义：如果我有一个设置 this.isChecked = false 的 TS 按钮；然后单击该按钮后没有任何反应。但是如果那个按钮有： this.isChecked = true;然后它“工作”，即选择了所有单选选项，这与我需要的完全相反
在这种情况下，我建议您使用 FormGroup 和 FormControl 来访问您的 ion-radio 并在构造函数中将其初始化为 false。如果您愿意，我可以为您进一步详细说明

标签： angular typescript ionic-framework ionic3

【解决方案1】：

感谢 dou2abou 的帮助，我想通了。

在这种情况下： 1. 将您的列表包装成有角的形式。 2.使用reset()表单控件。

所以在我的 .ts 中我现在有了：

import { FormGroup, FormControl } from '@angular/forms'


export class ProductDetailsPage {
  options;
  optionsForm;
}

  constructor() {
    this.optionsForm = new FormGroup({
      "options": new FormControl()});
    }

  resetList() {
    this.optionsForm.controls.options.reset()
  }
}

在 html 中：

<form [formGroup]="optionsForm">
    <ion-list radio-group class="size-list" formControlName="options">
    </ion-list>
</form>

【讨论】：