將復選框值傳遞給 Angular 中的數組

Question

我正在研究一種解決方案，其中根據乘客編號生成的每個輸入都會獲得額外的復選框。 我想傳遞每個復選框的值並將其綁定到它旁邊的輸入。 計划最終得到一個數組，其中我有輸入字段的值 + 每個復選框的值。 我不確定如何繼續前進。 目前，我有：

組件.HTML：

<li *ngFor="let passenger of createRange(showStorage.passengersNumber); let i=index"><input type="text" [(ngModel)]="passengersData[i]" placeholder="Name and surname">
<input type="checkbox" (click)="addChild($event)">Child
<input type="checkbox" (click)="addLuggage($event)">Luggage
</li>

組件.TS

  constructor() {
    this.passengersData = [];
  }

  public passengersData: any[];
  public luggageCounter: number = 0;
  public childrenCounter: number = 0;

  createRange(number){
  var items: number[] = [];
  for(var i = 1; i <= number; i++){
     items.push(i);
  }
  
  return items;
}

  addLuggage(event) {
    console.log("Added luggage");
    this.luggageCounter++
  }

  addChild(event) {
    this.childrenCounter++
    console.log(event);
  }

謝謝你的幫助！

STACKBLITZ： https://stackblitz.com/edit/flight-date-picker-with-service-done-qfmn6p

Answer 1

對兒童和行李使用具有 name 屬性和 boolean 屬性的數組，並僅在更新乘客數量並保留先前乘客的情況下重新生成數組。

這是一個有效的 StackBlitz https://stackblitz.com/edit/angular-ivy-s7dtu4?file=src%2Fapp%2Fapp.component.ts

Number of passengers <input type="text" [ngModel]="passengers.length" (ngModelChange)="updateNumOfPassengers($event)">
<li *ngFor="let passenger of passengers; let i=index">
  <input type="text" [name]="'name_' + 1" [(ngModel)]="passenger.name" placeholder="Name and surname">
  <input type="checkbox" [checked]="passenger.child" (change)="passenger.child = !passenger.child">Child
  <input type="checkbox" [checked]="passenger.luggage" (change)="passenger.luggage = ! passenger.luggage">Luggage
</li>

  passengers = [];

  updateNumOfPassengers(input: string) {
    const numOfPassengers = parseInt(input);
    if (!isNaN(numOfPassengers) && numOfPassengers >= 0) {
      const passengersToAdd = numOfPassengers - this.passengers.length;
      if (passengersToAdd > 0) {
        this.passengers = [...this.passengers, ...Array.from({ length: passengersToAdd }, _ => ({ name: '', child: false, luggage: false }))];
      } else if (passengersToAdd < 0) {
        this.passengers = this.passengers.filter((_, index) => index < numOfPassengers);
      }
    }
  }