One scenario I am working on involves assigning an Array of Objects to a select dropdown's options using ngFor like this:
<select>
<option *ngFor="let item of data" [value]="item.key">{{item.value}}</option>
<select>
Here is my sample data:
[
{
"key" : "CHV",
"value" : "Chivas"
},
{
"key" : "BLN",
"value" : "Balentines"
},
{
"key" : "BDG",
"value" : "Black Dog"
}
]
The goal here is to dynamically bind the properties specified by the user for the option value and label. I attempted the following which did not work as expected:
<option *ngFor="let item of data; let itemlabel = optionlabel; let itemvalue = optionvalue" value="{{item.itemvalue}}">{{item.itemlabel}}</option>
The component includes 'optionvalue' and 'optionlabel' strings defined as follows:
optionvalue : string = 'key';
optionlabel : string = 'value';
By switching these strings, I can interchange key and value for each option. Any suggestions on how to achieve this effectively?