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

【问题标题】：How to save radio button click, when I use *ngFor?当我使用 *ngFor 时如何保存单选按钮单击？
【发布时间】：2020-11-12 14:43:26
【问题描述】：

当我单击单选按钮时，我转到另一个视图（路线）并返回时，未单击单选按钮。如何解决？我使用 *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>

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

【问题讨论】：

请提供打字稿文件。 “去另一张卡”是什么意思。您是否实施了一些路线？
是的，我的意思是另一种观点，路线。我通过添加 ts 文件来编辑帖子。
“当我单击单选按钮时，我会转到另一个视图（路线）并返回” - 为什么单选按钮会将您带到另一个视图？如果不了解您的上下文，这个问题将无法解决。最好的办法是创建一个示例让我们理解您的意思：stackblitz.com
这是一个您可以继续编辑的基础：stackblitz.com/edit/…

标签： html node.js angular radio-button

【解决方案1】：

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

我们创建一个具有 2 个属性的简单服务，一个 BehaviorSubject 和一个 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();
  }
}

See this fork of @SalminSkenderovic stackblitz

【讨论】：