EXCEPTION: Expression has changed after it was checked

[htrex]

ng2-select2 supports ngOnChanges for the [data] input.

I'm receving the error in the subject when the input array changes so I've tried converting the array to an observable using Observable.of(inputArray) and the async pipe similarly as to the Dynamic Example but still receiving

EXCEPTION: Expression has changed after it was checked

The only workaround I've found is to set changeDetection: ChangeDetectionStrategy.OnPush in the @Component decorator, but that creates problems with other async data in the component.

Any example on how to change the [data] input array programmatically after the component initialization?

[NejcZdovc]

Demo for dynamically loading data with a 4s delay https://github.com/NejcZdovc/ng2-select2/tree/demo/src/app/demos/dynamic and live demo

[htrex]

I'm trying to filter the [data] input with a pipe and having the problem described. Would you be so kind to post an example using a pipe? I would owe you a beer ;)

[NejcZdovc]

What pipe are you using?

[htrex]

Something like this:

import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
    name: "fascicoliByTitolarioDataFilter"
})
export class FascicoliByTitolarioDataFilterPipe implements PipeTransform {

    transform(array: any[], titolari: number): any {

        // pre-compute some conditions to execute checks outside the loop
        let tL = titolari != -1;
        return _.filter(array, row => {

            if (tL && row.codice_titolario != titolari) return false;

            return true;
        });

    }
}

[htrex]

With further tests I've found that this issue is triggered only when using a regular array for the data source. Observable data sources work nicely with pipes.

working example:

<select2
...
[data]="fascicoli$ | async | fascicoliByTitolarioDataFilter"></select2>