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

Question

当我单击单选按钮时，我转到另一个视图（路线）并返回，未单击单选按钮。如何解决？我使用 *ngFor 来显示单选按钮的数据。

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>

订单运输.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)
      );
  }
}

标签： htmlnode.jsangularradio-button

Answer 1

您将需要一种在退出时保存所选选项的方法。最简单的方法是使用服务

我们创建一个简单的服务，它有 2 个属性，aBehaviorSubject和a，Observable它的值来自BehaviorSubject

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

下一步是读取这个值OnInit并更新这个值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();
  }
}

请参阅@SalminSkenderovic stackblitz 的这个分支