Очистка списка радио с помощью функции - ионная - PullRequest
0 голосов
/ 21 мая 2018

Я создаю ионное приложение.На одной из страниц у меня есть список радио.Теперь проблема в том, что, когда я перехожу к следующему экрану и затем возвращаюсь назад, список радио не очищается, что является плохим UX.Я вижу два возможных пути:

  • - либо функция, которая снимет галочку с моего списка (который я мог бы затем добавить в ionViewWillEnter) - что было бы лучше.Я играл с [проверено], но, похоже, не очень помогает.
  • или способ не кэшировать эту конкретную страницу

Я довольно много искал, как это сделатьлибо и не нашел много.Есть идеи?

Код для моего списка:

        <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>

1 Ответ

0 голосов
/ 22 мая 2018

благодаря помощи 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...