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

Answer 1

不知道你期望什么。您将每个选择绑定到相同的selectedCondition

<select class="form-control" [ngModel]="selectedCondition[conditionIndex]" (ngModelChange)="onChange(conditionindex, selectedCondition[conditionIndex]=$event)">

您需要确保将selectedCondition 初始化为与conditions 长度相同的数组