One of the challenges I am facing is with a component called Page, which contains two components - Editor and Preview.
Page has an array called items.
[
{
value: 0,
text: 'Item 1'
},
...
]
This array items is passed to both Editor and Preview like so:
<editor [items]="items"></editor>
<preview [items]="items"></preview>
The Editor component has the functionality to add, delete, edit, and reorder items.
The issue arises when Preview requires this array in a different format.
[
{
index: 0,
label: 'Item 1'
},
...
]
I tried creating a function to remap the items into radioItems:
getRadioItems(): any[] {
const items = [];
for (let i = 0; i < this.items.length; i++) {
items.push({ index: this.items[i].value,
label: this.items[i].text });
}
return items;
}
And then using it like this:
<radio-list [radioItems]="getRadioItems()"></radio-list>
However, this causes the radio list to refresh hundreds of times per second, making it impossible to change values without them being reset upon each refresh.
If there was no need for remapping, everything would work fine. What is the correct way to remap items to radioItems in this scenario?