typescript - Angular2 ngModel ändrar flera värden eftersom det är i en ngFor
Jag har ett sett med villkor där varje har olika mallar, jag har redan fixat den dynamiska innehållsläsaren. Men nu har jag ett problem när jag väljer ett villkor påverkar det varje rad eftersom det är i en ngFor..
Här kan du se resultatet för en bättre titt: https://www.dropbox.com/s/e4xg3q4ym2zdhw8/condition.jpg?dl=0
Som du kan se är mallen olika för varje rad, men om jag väljer ett villkor på en rad ändras allt. Vet du hur man kan arbeta runt denna loop eller finns det ett annat sätt att fixa detta?
Här är koden för mallen:
<div class="container">
<div class="row" *ngFor="#condition of conditions;#conditionindex = index">
<div class="col-xs-3">
<select class="form-control" [ngModel]="selectedCondition" (ngModelChange)="onChange(conditionindex, selectedCondition=$event)">
<option *ngFor="#c of catalog;#catalogindex = index" [value]="catalogindex">{{c.name}}</option>
</select>
</div>
<condition-detail [condition]="condition"></condition-detail>
</div>
<a class="btn btn-primary" (click)="newCondition()"><i class="glyphicon glyphicon-plus"></i></a>
Detta är komponentens kod:
@Component({
selector: 'condition-builder',
templateUrl: 'app/conditionbuilder.component.html',
directives: [ConditionDetailComponent]
})
export class ConditionBuilderComponent implements OnInit {
selectedCondition: any = 'DateCondition';
conditions: Condition[] = [];
catalog: Condition[] = [];
constructor(private _conditionService: ConditionService) { }
getConditions() {
this._conditionService.getConditions().then(conditions => this.catalog = conditions);
}
ngOnInit() {
this.getConditions();
}
onChange(conditionsIndex, catalogIndex) {
console.log(this.catalog[catalogIndex]);
console.log(this.selectedCondition);
this.conditions[conditionsIndex] = this.catalog[catalogIndex];
}
newCondition() {
this.conditions.push(this.catalog[0]);
console.log(this.selectedCondition);
}
deleteCondition():void {
this.conditions.pop();
}
}
Svar #1
Ingen aning om vad du förväntar dig. Du binder varje val till samma selectedCondition
<select class="form-control" [ngModel]="selectedCondition[conditionIndex]" (ngModelChange)="onChange(conditionindex, selectedCondition[conditionIndex]=$event)">
Du behöver säkerställa att selectedCondition är initialiserad till en array med samma längd som conditions
