Ionic 3: Как получить только выбранное значение из RadioButton?

Question

У меня несколько переключателей в списке, и я хочу получить только значение выбранного переключателя, но я получаю значение событий, по которым щелкнули.

Например, если я нажимаю опцию 1 (10 раз), а затем выбираю опцию 2 (1 раз), я получаю значение, подобное [Опция 1, Опция 1, Опция 1… x10time, Опция 2]

Как я могу это сделать?

Ниже мой код.

мой HTML,

<ion-list radio-group [(ngModel)]="sizeDetails">
    <ion-list-header>
      Select Your Preference
    </ion-list-header>

    <ion-item no-lines *ngFor="let list of prices_details; let i = index;">
      <ion-label text-wrap style="font-size:12px; color:black;">
        {{list.size}}
      </ion-label>

      <ion-label fixed text-right style="font-size:12px; color:black;">
        {{list.discounted_price_pretty}}
      </ion-label>
      <ion-radio item-left color="secondary" value="{{list.size}}, {{list.discounted_price_pretty}}"
        (ionSelect)="selectSize(list.size ,list.discounted_price_pretty, $event)">
      </ion-radio>

код my.ts,

selectSize(size, discounted_price_pretty, event) {
    if (event.checked) {
      this.selectedSize.push(size);
      this.selectedSizePrice.push(discounted_price_pretty);
    }
    else {
      let sizeindex = this.removeCheckedFromSize(size);
      this.selectedSize.splice(sizeindex, 1);
      let sizeprice = this.removeCheckedFromSizePrice(discounted_price_pretty);
      this.selectedSizePrice.splice(sizeprice, 1);
    }
  }
  //Removes checkbox from array when user uncheck it
  removeCheckedFromSize(size: String) {
    return this.selectedSize.findIndex((sizeType) => {
      return sizeType === size;
    })
  }
  //Removes checkbox from array when you uncheck it
  removeCheckedFromSizePrice(discounted_price_pretty: String) {
    return this.selectedSizePrice.findIndex((sizeprice) => {
      return sizeprice === discounted_price_pretty;
    })
  }

Answer 1

Прежде всего, я не думаю, что selectSize как функция должна быть такой большой.Я бы посоветовал вам применять Принцип единой ответственности при написании кода.

Во-вторых, в случае, если это форма, я бы порекомендовал вам использовать Группы форм ,Однако, если вы решите придерживаться своего подхода, что вполне нормально, вы можете захотеть, чтобы ваш код просто получил значение $event при отправке.

Параметр event в функции вашего файла TS вернетпараметр value из HTML-элемента ion-radio.

Answer 2

Нашел решение, но нужно было пойти на компромисс с переключателем

вот что я сделал в своих кодах

мой HTML

<ion-list>
      <ion-list-header>
        Select Your Preference
      </ion-list-header>
      <ion-item no-lines *ngFor="let list of prices_details; let i = index;">

        <ion-label text-wrap *ngIf="list.size" style="font-size:12px; color:black;">
          {{list.size}}
        </ion-label>

        <ion-label fixed text-right style="font-size:12px; color:black;">
          ₹ {{list.discounted_price}}
        </ion-label>
        <ion-checkbox item-left color="secondary" formControlName="list"
          (ionChange)="selectSize(list.size ,list.discounted_price, $event.checked)">
        </ion-checkbox>
      </ion-item>
    </ion-list>

в моем файле .ts

//Adds the checkbox to the array and check if user unchecked it
  selectSize(size, discounted_price_pretty, isChecked: boolean) {
    if (isChecked === true) {
      this.selectedSize.push(size);
      this.selectedSizePrice.push(discounted_price_pretty);
    }
    else {
      let index = this.removeCheckedFromSize(size);
      this.selectedSize.splice(index, 1);
      let priceIndex = this.removeCheckedFromSizePrice(discounted_price_pretty);
      this.selectedSizePrice.splice(priceIndex, 1);
    }
  }

Answer 3

Попробуйте, это мой код для динамического просмотра элементов, и он работает нормально, поэтому используйте его в соответствии с вашими требованиями.

 <span *ngFor="let item of list_launches">
    <ion-row radio-group [(ngModel)]="item.review" (ionChange)="itemReview(item.review,item.item)">
      <ion-col col-4 text-wrap>
        <ion-item no-padding>
          {{item.item}}
        </ion-item>
      </ion-col>
      <ion-col class="rate">
        <ion-item no-padding>
          <ion-radio [value]="item.value1"></ion-radio>
        </ion-item>
      </ion-col>
      <ion-col class="rate">
        <ion-item no-padding>
          <ion-radio [value]="item.value2"></ion-radio>
        </ion-item>
      </ion-col>
      <ion-col class="rate">
        <ion-item no-padding>
          <ion-radio [value]="item.value3"></ion-radio>
        </ion-item>
      </ion-col>
      <ion-col class="rate">
        <ion-item no-padding>
          <ion-radio [value]="item.value4"></ion-radio>
        </ion-item>
      </ion-col>
      <ion-col class="rate">
        <ion-item no-padding>
          <ion-radio [value]="item.value5"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </span>

Это мой файл .ts

  ionViewDidEnter() {

    this.itemDetails();

  }

  itemDetails() {
    this.list_launches = [
      { id: 0, item: "item 1", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 1, item: "item 2", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 2, item: "item 3", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 3, item: "item 4", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 4, item: "item 5", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 5, item: "item 6", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 6, item: "item 7", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 7, item: "item 8", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 8, item: "item 9", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
      { id: 9, item: "item 10", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
    ]
  }