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相同长度的数组

Angular2 ngModel会更改多个值，因为它位于ngFor中

1 个答案: