Ionic 3：如何仅从 RadioButton 获取选定的值？

Question

我在列表中有多个单选按钮，我只想获取 selected 单选按钮的值，但我正在获取单击事件的值。

如果我点击选项 1（10 次）然后 select 选项 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 作为一个函数不需要那么大。我建议您在编写代码时应用 Single Responsibility Principle。

其次，如果这是一个表格，我建议你使用Form Groups。但是，如果您选择坚持您的方法，这绝对没问题，您可能希望您的代码在提交时简单地获取 $event 值。

您的 TS 文件函数中的 event 参数将 return 来自 ion-radio HTML 元素的 value 参数。

Answer 2

试试这个，这是我的动态项目审查代码，它工作正常，所以请根据您的要求使用它。

 <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 },
    ]
  }

Answer 3

找到解决方案但需要与单选按钮妥协

这是我在代码中所做的事情

我的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);
    }
  }

Ionic 3：如何仅从 RadioButton 获取选定的值？

Ionic 3: How to get only selected value from RadioButton?

ionic-framework

ionic3