如何将输入类型单选变成带选项的选择？

Question

我有这个输入类型收音机：

<div *ngFor="let status of statuses; let i = index">
    <input (click)="editStatus(order, status)" type="radio" [checked]="order.status == status" 
         name="status" [value]="status">{{orderStatuses[status]}}
</div>

我把它变成了这个选择：

<select>
    <option *ngFor="let status of statuses; let i = index" name="status" [value]="status.value"
        [selected]="order.status == status" (change)="editStatus(order, status)">
        {{orderStatuses[status]}}
    </option>
</select>

但在那之后，函数“editStatus（订单，状态）”停止工作 - 没有做任何事情。我认为这是因为它没有在参数中获得正确的“状态”。如何解决？

ts 文件：

order: Order;
statuses = Object.keys(OrderStatus);
orderStatuses = OrderStatus;

ngOnInit() {
    this.subscribe = this.route.params.pipe(
      map(({ id }) => id),
      switchMap((id: string) => this.orderService.getOrderById(id)))
      .subscribe((res) => {
        this.order = res;
      });
  }
editStatus(order, status) {
    this.orderEdited = { order, status };
    this.orderService.editStatus(this.orderEdited).subscribe(
      res => {
        console.log(res);
      },
      err => console.log(err)
    );
  }

订单接口和枚举OrderStatus：

export interface Order {
  sum: number;
  items: {};
  status: string;
}

export enum OrderStatus {
  order_placed = 'placed',
  order_confirmed = 'confirmed',
  order_shipped = 'shipped',
  order_completed = 'completed',
  order_canceled = 'canceled',
}

Answer 1

您应该在选择元素上放置更改事件。

<select (change)="editStatus($event.target.value,order)">
    <option *ngFor="let status of statuses; let i = index" name="status" [value]="status.value"
        [selected]="order.status == status" >
        {{orderStatuses[status]}}
    </option>
</select>