切换单选组时更新另一单选组值的问题求助

Hey there, let's break down why your second radio group's options aren't updating when you switch the first one, and fix it step by step.

The Root Cause #

The issue lies in how you're setting the value attribute on your second radio group's items. When you write value="Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}", that's a static string interpolation that only gets evaluated once when the component initializes. Angular won't automatically re-calculate this value when cardOrderNumber changes later.

Fix 1: Use Property Binding for Dynamic Values #

Replace the static value attribute with Angular's property binding ([value]) and use template literals to dynamically build the value string. This tells Angular to watch for changes in cardOrderNumber and update the value automatically.

Here's the updated second radio group code:

<ion-radio-group [(ngModel)]="selectedCardTitle" (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>

Notice I added [(ngModel)]="selectedCardTitle" here too—this ensures the selected state stays in sync when the option values update, which prevents unexpected behavior if a user had already selected an option before switching the first radio group.

Fix 2: Handle Change Detection (If Needed) #

If your component uses the ChangeDetectionStrategy.OnPush strategy (common for performance optimization), Angular might not pick up the change to cardOrderNumber automatically. To fix this, inject ChangeDetectorRef into your component and trigger manual change detection after updating the value.

First, import and inject it in your component:

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // ... your component metadata
})
export class YourComponent {
  cardOrderNumber: number = 6; // default value
  selectedCardTitle: string = '';

  constructor(private cdRef: ChangeDetectorRef) {}

  updateCardOrdersNumber(event: any) {
    this.cardOrderNumber = event.detail.value;
    // Trigger manual change detection
    this.cdRef.detectChanges();
  }

  updateCardTittle(event: any) {
    this.selectedCardTitle = event.detail.value;
  }
}

If you're not using OnPush, this step might not be necessary, but it's a safe fallback if you still see issues.

Quick Check for Your First Radio Group #

Since you're using [(ngModel)]="cardOrderNumber", the updateCardOrdersNumber method is technically redundant because two-way binding already updates the variable. But if you need extra logic when the value changes, keeping the method is fine—just make sure you're assigning the correct value from the event.

Final Notes #

• Always use property binding ([value]) for dynamic values in form controls, not static attribute interpolation.
• Two-way binding ([(ngModel)]) on the second radio group ensures the selected value stays consistent as options change.
• Manual change detection is only needed if you're using OnPush strategy.

内容的提问来源于stack exchange，提问作者Fabio Heitor