在 Angular 7 中，选择下拉值 id 传递给 ngFor 列表中的所有选择下拉列表

Posted 2023-03-13

【中文标题】在 Angular 7 中，选择下拉值 id 传递给 ngFor 列表中的所有选择下拉列表

【英文标题】：In Angular 7 select dropdown value id passes to all select dropdowns in ngFor list

【发布时间】：2019-10-03 20:10:12

【问题描述】：

我正在使用 ngFor 获取标签并选择下拉列表，特别是 Angular 7 中的 div 标签。但是，如果我从任何一个选择下拉列表中选择选项，它的更改将发生在 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="bedIDitem.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>

【问题讨论】：

您能否为此制作 stackblitz 示例或分享您的 onChangeBedsDetails 方法代码，以便我们更好地了解您在该方法中所做的事情。

将投注类型传递给onchangeBedsDetails方法并根据床型设置值

【参考方案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="bedIDitem.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 Link