当我使用 *ngFor 时如何保存单选按钮点击？

Question

When I click on the radio button, I go to another view (routes) and come back, the radio button is didn't clicked. How to fix it? I use *ngFor to display data of radio buttons.

order-shipping.component.html:

<div class="card-header">
  <input type="radio" name='shipping' (click)="calculatePrices.emit(shipping.price)"> {{shipping.name}}
  <p class="card-text"> price: {{shipping.price}}</p>
</div>

order-shipping.component.ts:

export class OrderShippingComponent implements OnInit {
  @Input() shipping;
  @Output() calculatePrices = new EventEmitter();
  constructor() { }
  ngOnInit() { }
}

order.component.html:

<app-order-shipping *ngFor="let shipping of shippings" [shipping]="shipping"
(calculatePrices)="this.cartService.calculatePrices($event)"> </app-order-shipping>

order.component.ts:

export class OrderComponent implements OnInit {
  items = {};
  shippings = [];
  constructor(private cartService: CartService, 
  private shippingService: ShippingService) { }

  ngOnInit() {
    this.items = this.cartService.getItems();
    this.shippingService.getShipping()
      .subscribe(
        res => this.shippings = res,
        err => console.log(err)
      );
  }
}

Answer 1

You will need a way to save the selected option on exit. The easiest way is to use a service

We create a simple service with 2 properties, a BehaviorSubject and an Observable deriving its value from the BehaviorSubject

export class OrderService {
  constructor() { }
  selectedOrderSubject$ = new BehaviorSubject<null | string>(null)
  selectedOrder$ = this.selectedOrderSubject$.asObservable()
}

The next step is to read this value OnInit and update this value OnDestroy

export class OrderComponent implements OnInit, OnDestroy {
  shippings = ["Shipping A", "Shipping B"];
  selectedShipping = "";
  destroyed$ = new Subject();

  calculatePrices(shipping) {
    this.selectedShipping = shipping;
    //this.cartService.calculatePrices($event)
  }
  ngOnInit() {
    this.orderService.selectedOrder$
      .pipe(takeUntil(this.destroyed$))
      .subscribe({
        next: order => (this.selectedShipping = order)
      });
  }
  constructor(private orderService: OrderService) {}
  ngOnDestroy() {
    this.orderService.selectedOrderSubject$.next(this.selectedShipping);
    this.destroyed$.next();
  }
}

See this fork of @SalminSkenderovic stackblitz