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

首先，我认为Select作为一个函数不需要那么大。我建议您在编写代码时应用Single Responsibility Principle。

第二，如果是表格，我建议您使用Form Groups。但是，如果您选择坚持自己的方法，那绝对没问题，那么您可能希望代码在提交时简单地获得Number of rooms 2 Price 120000 Square in meter 60值。

TS文件功能中的<?php $str = get_field('all'); preg_match('/ Number of rooms \s*(\d+)/' , $str, $matches); echo $matches[1]; ?>参数将从selectSize HTML元素返回$event参数。

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

离子3：如何仅从RadioButton中获取选定的值？

3 个答案: