typescript - Angular2 ngModel は ngFor にあるため、複数の値を変更します

Question

それぞれに異なるテンプレートを持つ一連の条件があり、動的コンテンツローダーを修正する準備ができています。しかし、ngForにあるため、すべての行に影響する条件を選択すると問題が発生します..

ここでは、見栄えの良い結果を確認できます: https://www.dropbox.com/s/e4xg3q4ym2zdhw8/condition.jpg?dl=0

ご覧のとおり、テンプレートは行ごとに異なりますが、行の条件を選択するとすべてが変わります。この for ループを回避する方法を知っていますか、またはこれを修正する他の方法はありますか?

テンプレートのコードは次のとおりです。

<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>

これはコンポーネントのコードです:

@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();
}
}