title: Angular2 ngModel changes multiple values because it is in a ngFor
body: <p>I have a set of conditions each of them have different templates, i all ready fixed the dynamic content loader. But now i have an issue when i select a condition it affects every row because it is in a ngFor.. </p>
  
  <p>Here you can see the result for a better look:
  <a href="https://www.dropbox.com/s/e4xg3q4ym2zdhw8/condition.jpg?dl=0" rel="nofollow">https://www.dropbox.com/s/e4xg3q4ym2zdhw8/condition.jpg?dl=0</a></p>
  
  <p>As you can see the template is different for each row but if i select a condition on a row it all changes. Do you know how to work around this for loop or is there a other way to fix this?</p>
  
  <p>Here is the code of the template:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row" *ngFor="#condition of conditions;#conditionindex = index"&gt;
      &lt;div class="col-xs-3"&gt;
          &lt;select class="form-control" [ngModel]="selectedCondition" (ngModelChange)="onChange(conditionindex, selectedCondition=$event)"&gt;
              &lt;option *ngFor="#c of catalog;#catalogindex = index" [value]="catalogindex"&gt;{{c.name}}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;condition-detail [condition]="condition"&gt;&lt;/condition-detail&gt;
  &lt;/div&gt;
  
  &lt;a class="btn btn-primary" (click)="newCondition()"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the code of the component:</p>
  
  <pre><code>@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 =&gt; 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();
  }
  }
  </code></pre>