更改另一个无线电组时，如何更新一个无线电组的值? [英] How to update the value of a radio group, when changing another radio group?

问题描述

您好，有两个无线电组，并且我希望在更改无线电组值之一时更新这些值，因为它们都已连接.

如果我更改第一个无线电组的值，我希望第二个无线电组进行更新.

HTML:

 < ion-radio-group [(ngModel)] =" cardOrderNumber"(ionChange)="updateCardOrdersNumber($ event)"< ion-list-header>< ion-label> {{'component.loyaltyCard.numberOfOrdersNeeded'|翻译}}</ion-label></ion-list-header>< ion-item>< ion-label> 6</ion-label>< ion-radio slot ="start"color =成功"[值] ＝"6"/离子半径.</ion-item>< ion-item>< ion-label> 8</ion-label>< ion-radio slot ="start"color =成功"[值] ＝"8"/离子半径.</ion-item></ion-radio-group>< ion-radio-group(ionChange)="updateCardTittle($ event)">< ion-list-header>< ion-label> {{'component.loyaltyCard.cardTitle'|翻译}}</ion-label></ion-list-header>< ion-item>< ion-label>包含{{cardOrderNumber +1}} pague {{cardOrderNumber}}</ion-label>< ion-radio slot ="start"color =成功"value =" Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}"></ion-radio></ion-item>< ion-item>< ion-label> Pague {{cardOrderNumber}} receba 1grátis</ion-label>< ion-radio slot ="start"color =成功"value ="Pague {{cardOrderNumber}} receba 1grátis"</ion-radio></ion-item></ion-radio-group> 

ts:

 <代码> updateCardOrdersNumber(number1){this.cardOrderNumber = number1.detail.value;this.cardSquareArray.length = this.cardOrderNumber;this.orderRow1.length = this.cardOrderNumber/2;this.orderRow2.length = this.cardOrderNumber/2;}updateCardTittle(tittle){this.cardTittle = tittle.detail.value;} 

如果我更改第一个无线电组的值，我希望更新第二个组的值，因为当第一个无线电组的值更改时，第二个组的文本也会更改.

当第一组发生更改时，我必须更新的逻辑是什么?

解决方案

如果您要处理 ionChange ngModel 绑定控件.>事件.

请查看

在该演示中，一旦用户根据所选选项选择了第一组的选项，我将创建第二组的选项:

组件:

 //...public selectedOption:数字；public selectedSuboption:数字；公共选项= [{标签:"2件"，价值:2}，{标签:"3件"，价值:3}];公共子选项= []；公共updateSelectedOption(事件:CustomEvent):无效{const selectedOption = event.detail.value;//清除现有的子选项this.suboptions = [];for(让i = 0; i< selectedOption; i ++){this.suboptions.push({标签:"Item $ {i + 1}"，值:i + 1});}this.selectedOption = selectedOption;}公共updateSelectedSuboption(事件:CustomEvent):无效{this.selectedSuboption = event.detail.value;}//... 

模板:

 < ion-list>< ion-radio-group(ionChange)="updateSelectedOption($ event)">< ion-list-header>< ion-label>项目</ion-label></ion-list-header>< ion-item * ngFor ="让选项的选项>< ion-label> {{option.label}}</ion-label>< ion-radio [value] ="option.value"</ion-radio></ion-item></ion-radio-group></ion-list>< ng容器* ngIf ="selectedOption">< ion-list>< ion-radio-group(ionChange)="updateSelectedSuboption($ event)">< ion-list-header>< ion-label>显示{{selectedOption}}个项目</ion-label></ion-list-header>< ion-item * ngFor =子选项的选项"< ion-label> {{option.label}}</ion-label>< ion-radio [value] ="option.value"</ion-radio></ion-item></ion-radio-group></ion-list></ng-container> 

Hi have two radio groups, and i want the values to update when i change one of the radio group value, beause they are both conected.

If i change the first radio group value, i want the second radio group to update.

HTML:

<ion-radio-group [(ngModel)]="cardOrderNumber" (ionChange)="updateCardOrdersNumber($event)">
      <ion-list-header>
        <ion-label>{{'component.loyaltyCard.numberOfOrdersNeeded' | translate}}</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>6</ion-label>
        <ion-radio slot="start" color="success" [value]="6"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>8</ion-label>
        <ion-radio slot="start" color="success" [value]="8"></ion-radio>
      </ion-item>
    </ion-radio-group>

 <ion-radio-group (ionChange)="updateCardTittle($event)">
      <ion-list-header>
        <ion-label>{{'component.loyaltyCard.cardTitle' | translate}}</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}</ion-label>
        <ion-radio slot="start" color="success" value="Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Pague {{cardOrderNumber}} receba 1 grátis</ion-label>
        <ion-radio slot="start" color="success" value="Pague {{cardOrderNumber}} receba 1 grátis"></ion-radio>
      </ion-item>
    </ion-radio-group>

ts:

  updateCardOrdersNumber(number1){
    this.cardOrderNumber = number1.detail.value;
    this.cardSquareArray.length = this.cardOrderNumber;
    this.orderRow1.length = this.cardOrderNumber / 2;
    this.orderRow2.length = this.cardOrderNumber / 2;
  }

  updateCardTittle(tittle){
    this.cardTittle = tittle.detail.value;
  }

if i change the value of the first radio group, i want the second group value to be updated, because the text of the second group changes when the first radio group value changes.

WHat is the logic that i have to do to update when the first group changes?

解决方案

You don't really need to bind the control using ngModel if you are going to handle the ionChange event.

Please take a look at this stackblitz project

In that demo I'm creating the options of the second group once the user selects an option of the first group, based on the selected option:

Component:

// ...

public selectedOption: number;
  public selectedSuboption: number;

  public options = [
    {
      label: "2 items",
      value: 2
    },
    {
      label: "3 Items",
      value: 3
    }
  ];

  public suboptions = [];

  public updateSelectedOption(event: CustomEvent): void {
    const selectedOption = event.detail.value;

    // Clear existing suboptions
    this.suboptions = [];

    for (let i = 0; i < selectedOption; i++) {
      this.suboptions.push({
        label: `Item ${i + 1}`,
        value: i + 1
      });
    }

    this.selectedOption = selectedOption;
  }

  public updateSelectedSuboption(event: CustomEvent): void {
    this.selectedSuboption = event.detail.value;
  }

// ...

Template:

    <ion-list>
      <ion-radio-group (ionChange)="updateSelectedOption($event)">
        <ion-list-header>
          <ion-label>
            Items
          </ion-label>
        </ion-list-header>

        <ion-item *ngFor="let option of options">
          <ion-label>{{ option.label }}</ion-label>
          <ion-radio [value]="option.value"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>

    <ng-container *ngIf="selectedOption">
      <ion-list>
        <ion-radio-group (ionChange)="updateSelectedSuboption($event)">
          <ion-list-header>
            <ion-label>
              Showing {{ selectedOption }} items
            </ion-label>
          </ion-list-header>

          <ion-item *ngFor="let option of suboptions">
            <ion-label>{{ option.label }}</ion-label>
            <ion-radio [value]="option.value"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ng-container>

这篇关于更改另一个无线电组时，如何更新一个无线电组的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！