在 Angular 7 select 下拉列表中,值 id 传递给 ngFor 列表中的所有 select 下拉列表
In Angular 7 select dropdown value id passes to all select dropdowns in ngFor list
我正在使用 ngFor 获取标签和 select 下拉列表,特别是 angular 中的 div 标记 7。但是如果我 select 选项来自任何一个 select 下拉列表它的变化发生在所有 select 下拉列表中 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>
所有下拉值都在变化的原因是因为您对所有下拉列表具有相同的 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]);
}
}
我正在使用 ngFor 获取标签和 select 下拉列表,特别是 angular 中的 div 标记 7。但是如果我 select 选项来自任何一个 select 下拉列表它的变化发生在所有 select 下拉列表中 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>
所有下拉值都在变化的原因是因为您对所有下拉列表具有相同的 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]);
}
}