В Angular 7 значение id выпадающего списка передается всем выпадающим спискам в списке ngFor.

Question

Я использую ngFor получает метку и выбираю выпадающий список в конкретном теге div в угловом 7. Но если я выбираю опцию из любого выбранного выпадающего списка, его изменения происходят во всех выпадающих списках в теге div

<div class="row">
    <ng-container *ngFor='let item of Bedroom.PBeda'>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <span class="font-wt-600">{{item.PBedName}}</span><br /><br />
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <select class="form-control" name="value" id="bedID{{item.PBedID}}"[(ngModel)]="beds.value (ngModelChange)="onChangeBedsDetails($event,item.PBedID)">
                <option value="0">Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </ng-container>
</div>

Answer 1

Причина, по которой все раскрывающиеся значения меняются, заключается в том, что у вас одинаковые ngModel для всех раскрывающихся списков, вместо этого сохраните значения в массиве, как показано ниже:

Компонент HTML:

<div class="row">
    <ng-container *ngFor='let item of Bedroom.PBeda'>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <span class="font-wt-600">{{item.PBedName}}</span><br /><br />
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <select class="form-control" name="value" id="bedID{{item.PBedID}}" 
                    [(ngModel)]="beds.value[item.PBedID]" (ngModelChange)="onChangeBedsDetails($event,item.PBedID)">
                <option value="0">Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </ng-container>
</div>

Компонент TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  beds: any = {
    value: []
  }
  Bedroom: any = {
    PBeda: [
      {
        PBedID: 1,
        PBedName: 'hello'
      },
      {
        PBedID: 2,
        PBedName: 'hello2'
      }
    ]
  }

  onChangeBedsDetails(event, id) {
    console.log(this.beds.value[id]);
  }
}

Ссылка Stackblitz