Aurelia Array Observer with a Filtering Value Converter

Question

Similar to this issue , I'm trying to setup an Array Observer to watch an array of strings (used in a filter ValueConverter) and then trigger a re-evaluation when the array changes.

Below is what I currently have. It appears to work is so far as when checking/unchecking the selectedFeatures, the observer callback is invoked. However, the ValueConverter is never invoked after the initial load.

The Array Observer:

import {inject, ObserverLocator} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';

@inject(HttpClient, ObserverLocator)
export class Home{
    flagPropertyName = false;
    selectedFeatures = [];

    constructor(http, observerLocator){
        var subscription = observerLocator
            .getArrayObserver(this.selectedFeatures)
            .subscribe(this.onFeaturesChanged);
    }

    <activate omitted>

    onFeaturesChanged(mutations) {
        this.flagPropertyName = !this.flagPropertyName;
    }
}

export class FilterPlaceValueConverter {
    toView(places, expected){
        console.log(JSON.stringify(expected));
        <code omitted>
}

In the View:

Binding selectedFeatures:

<label repeat.for="feature of features">
    <input type="checkbox" checked.bind="$parent.selectedFeatures" value.bind="feature.name" />
    ${feature.name}
</label>

Binding the ValueConverter:

<div repeat.for="place of places | filterPlace:selectedFeatures:flagPropertyName">

My cursory understanding was that updating flagPropertyName in the onFeaturesChanged callback would force the repeat.for to invoke the ValueConverter any time selectedFeatures array is modified.

Answer 1

And this fixed it:

constructor(http, observerLocator){
    observerLocator
        .getArrayObserver(this.selectedFeatures)
        .subscribe(() => {
            this.testFlag = !this.testFlag;
        });