Forgive the title, I am not entirely sure of what I am trying to ask here.
I have an html table and using *ngFor to iterate over a data object. Within this iteration, I print out the value of a specific field and attached an *ngIf to it. When my table is in "Edit Mode" that text value goes away and a dropdown menu is expose to allow the user to change the value.
The dropdown uses ngModel and I can see my data being updated correctly within my json that I have right below my dropdown. My issue however is that this dropdown is bound to the OperatorID in my object (which is correct) but the Text in the dropdown is a different part of the object.
HTML:
<td class="small col-md-1 oper">
<span *ngIf="!inEditMode(r.RuleParentID, a.AttributeID)">
<strong>{{ a.OperatorName }}</strong>
</span>
<select class="form-control input-sm" [(ngModel)]="a.OperatorID" *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
<option *ngFor="let o of fetchOperatorList(a.AttributeID)" [value]="o.OperatorID" [selected]="o.OperatorID === a.OperatorID">{{ o.OperatorName }}</option>
</select>
</td>
Data Object:
{
"AttributeID": "2",
"AttributeName": "Role",
"OperatorID": "3",
"OperatorName": "In List",
"SqlOperator": "IN"
}
The issue I am facing is that once I change the value in the dropdown and it updates the OperatorID in my object, I then disable "Edit Mode" which turns the dropdown back into the interpolated text it printed from the *ngFor, which is OperatorName in the object.
This results in the name not getting updated and the value is getting updated.
Is there a way to bind on multiple values? When I select an option in my select for example, I want the select value to update OperatorID and the select text to update the OperatorName.
How should I approach this?
2 Answers 2
If i understood your problem correctly, You need to update the a.OperatorName to whatever it corresponds to the new selection (Based on the id). You should be able to achieve this by binding to the select change event.
<select class="form-control input-sm"
[(ngModel)]="a.OperatorID"
*ngIf="inEditMode(r.RuleParentID, a.AttributeID)"
(change)="onChange($event.target.value)">
<option *ngFor="let o of fetchOperatorList(a.AttributeID)" [value]="o.OperatorID" [selected]="o.OperatorID === a.OperatorID">{{ o.OperatorName }}</option>
</select>
Then in your component.
public onChange(operatorId) {
// update operator object in collection based on id
}
6 Comments
ngModel then when I could just pass $event to the onChange and make both updates at the same time right?ngModel, as you'll replace the whole instance. you could also probably do the change on the fly like this (change)="a.OperatorName = $event.target.value but Its bad as you'll end up with dodgy data if you don't update the whole thingonChange event and then search my object for where I need to update the data and do so.Instead of using ngModel, you can use a function in the component and bind it to the change event of the select.
Template:
<div>{{selectedOperator | json}}</div>
<select class="form-control input-sm" #mySelect
(change)="onSelectChange(mySelect.value)">
<option *ngFor="let o of operators"
[value]="o.OperatorID" [selected]="o.OperatorID === selectedOperator.OperatorID">{{ o.OperatorName }}</option>
</select>
Component:
selectedOperator;
operators = [
{
OperatorID: 1,
OperatorName: "Foo"
},
{
OperatorID: 2,
OperatorName: "Bar"
},
{
OperatorID: 3,
OperatorName: "Awesomesauce"
}
]
onSelectChange(id) {
this.selectedOperator = this.operators.find(i => i.OperatorID === Number(id));
}
ngOnInit(){
this.selectedOperator = this.operators[2];
}