Array of object change from click.delegate

Help Requests
1

I have two array of objects, selectedBandKind and selectedBandId. I am using them to select multiple checkboxes at the same time. I am also using them to show the desired icon. It is just an array of object and not collection.

I thought about using collection, but i needed to pass some arguments, so i am using click.delegate. In the click.delegate callback, i am changing the content of the array and i can see the change happening in console.log. But array is not reflecting the change in the View. Any idea why?

<div class="workflow-module-analysis-legend-data-cell" repeat.for="BandKind of BandKinds.All().splice(1)">
    <a class="workflow-module-analysis-legend-checkbox ${selectedBandKind[$parent.$index] === BandKind && selectedBandId[$parent.$index] === measurement.id ? 'selected': ''}"
       click.delegate="selectBand(measurement.id, BandKind, $parent.$index)"
       title="Show ${BandKind.name} bands for '${measurement.name}.'">
        <fa-icon icon="${selectedBandKind[$parent.$index] === BandKind && selectedBandId[$parent.$index] === measurement.id ? 'fas fa-check': 'fas fa-check-circle'}"></fa-icon>
    </a>
</div>

and click.delegate function is

public selectBand(id: string, bandKind: BandKind, index: string): void
{
    this.busy = true;
    
   this.selectedBandId = this.selectedBandId === id && this.selectedBandKind === bandKind ? undefined : id
   this.selectedBandKind[index] = bandKind; 

    this.busy = false;
}
2

When you’re changing by index, that won’t be changing the View, you need to do something that will trigger a dirty change (like a splice). You can see the answer that I asked for the same kind of question couple years ago on Stack Overflow How to force binding re-evaluate or re-rendering in Aurelia

3

still does not work.

public selectBand(id: string, BandKind: BandKind, index: string): void
    {
        this.busy = true;
        this.selectedBandId.splice(parseInt(index), 1, this.selectedBandId[index] === id && this.selectedBandKind[index] === BandKind ? undefined : id);    
        console.log("selectedBandId ", this.selectedBandId[index]);

        this.selectedBandKind.splice(parseInt(index), 1, BandKind);
        console.log("selectedBandKind ", this.selectedBandKind[index]);

        this.busy = false;
    }

Even though i can see the change in console.log.

4

You’re still using array indexes in the View so that still probably won’t work. I think in your case you’ll need to use some Matcher, check this Objects with Matcher

5

It seems a bit complicated to me…can you give a bit more hint…like how would matcher would look in above case…

6

can you ctreate a small code-sandbox that demonstrate the problem?
I’m sure we’ll be able to help you more…