It's starting to really bother me! I came across an array of objects and found a solution here: How to use select/option/NgFor on an array of objects in Angular2
However, even though I followed the same steps, when I log my $event it shows up as undefined. This might be because it gets stringified and then not parsed back.
Take a look at this snippet of my code:
<div class="container">
<div class="row" *ngFor="#condition of conditions;#conditionindex = index">
<div class="col-xs-3">
<select class="form-control" [ngModel]="stringify(condition)" (ngModelChange)="onChange(conditionindex, $event)">
<option *ngFor="#c of catalog;#catalogindex = index" [value]="stringify(c)">
{{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>
Here is the component code as well:
export class ConditionBuilderComponent implements OnInit {
conditions: Condition[] = [];
catalog: Condition[] = [];
constructor(public _conditionService: ConditionService) { }
getConditions() {
this._conditionService.getConditions().then(conditions => this.catalog = conditions);
}
ngOnInit() {
this.getConditions();
}
stringify(o:any): string {
return JSON.stringify(o);
}
onChange(conditionsIndex, selectedCondition:string): void {
console.log(typeof selectedCondition);
//JSON.parse(selectedCondition);
console.log(selectedCondition);
//this.conditions[conditionsIndex] = this.catalog[condition];
console.log(typeof selectedCondition);
}
I could really use some assistance with this. The console log for selectedCondition keeps showing up as undefined.