如何在 *ngFor 列表中独立于 [(ngModel)] 分配并选择 HTML 标签

Question

I have a problem with [(ngModel)], it syncs all my select to variable

my variable is selectStations = [];

So, when I select an option inside, it will render all select to select the same one and assign to all slot in a variable (see the picture below, just look at it override all slot that is available)

Typesript:

      stations: StationModel[] = [];
      selectStations = [];   
    
      addSlotSelectStation(){
        this.view.loading = true;
        this.selectStations.push(null);
        console.log(this.selectStations);
        this.view.loading = false;
      }
      addSelectStation(index: number, stationId: string) {
        console.log(index);
        this.selectStations[index] = stationId;
      }
      deleteSelectStation(index: number): void{
        this.selectStations.splice(index, 1);
        console.log('delete index', index);
      }

HTML:

     <button class="btn btn-primary" (click)="addSlotSelectStation()">
         add slot
     </button>

<!-- List Group All -->
        <ul class="list-group overflow-auto">
          <!-- Loop List All Select Station -->
          <li
            *ngFor="let selectStation of selectStations; let index = index"
            class="list-group-item"
          >
            <div class="form-inline">
              <!-- Order Number -->
              <span class="mr-3">{{ index + 1 }}</span>
              <!-- Selection Dropdown -->
              <select
                #selectnow
                class="form-control bg-light col mr-3"
                name="selectStation[{{index}}]"
                formControlName="selectStation"
                size=1
                [(ngModel)]="selectStations[index]"
                (change)="addSelectStation(index, selectnow.value)"
              >
                <option selected value="">choose station...</option>
                <option
                  *ngFor="let station of stations"
                  [value]="station.id"
                >
                  {{ station.name }}
                </option>
              </select>

              <!-- For test debug reasons -->
              <div>{{ selectStations[index] }}</div>
              <div>{{ index }}</div>

              <!-- Delete Select Station -->
              <button
                class="btn btn-outline-info"
                (click)="deleteSelectStation(index)"
              >
                X
              </button>
            </div>
          </li>
        </ul>

Result:

So That's the problem, I want it just select only one, and assign value only one each selector, not override another selector value.

Answer 1

[Solved] I change it from [(ngModel)] to use FormArray. That's very useful when it come across iterating in the list of input/dropdown and etc.

This Link is super useful, Check it out! :) Angular Reactive Forms: The Ultimate Guide to FormArray