ng-select
ng-select copied to clipboard
basvandenberg
Error: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
I keep getting this error. In my component I have this:
ngOnInit() {
setTimeout(() => {
this.formOptions = this.formData.get(["categories"])
}, 0)
}
And this is in my template:
ng-select([options]="(formOptions | async)?.categories", [multiple]="true", [allowClear]="true", formControlName="sourceCategories")
I have nailed it down to being a problem with ng-select since it goes away once I remove it from my template.
[allowClear]="true" is supposed to only be usable in single select, see if it fixes it!
<ng-select [options]="(formOptions | async)?.categories" [multiple]="true" [allowClear]="true" formControlName="sourceCategories"></ng-select> try it like this, neglected to see you had commas separating the properties.
My bad, I posted the Pug line instead of the generated html. Here is the html updated as per your suggestion and still gives me the same problem:
<ng-select [options]="(formOptions | async)?.categories" [multiple]="true" formControlName="sourceCategories"></ng-select>
This pug works:
ng-select([options]="[{value:'hello', label:'hello'}]", [multiple]="true", formControlName="sourceCategories")
Are there any known problems with async pipe and this component?
To be honest, I have no clue, only recently started working on angular2, and I still feel like I'm grasping at straws most of the time. However, I graduated by Googling my way out of every hole i found, and was able to find this : http://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked/34364881#34364881 Now, i dunno if this will be of any help, but it at least gives you a reason for that type of error, maybe you can work things out after that!
I have an external observable setting options... and even without specifying or binding any boolean properties, I get this exact same error.
<ng-select [options]="inputBase.options"
[formControlName]="inputBase.key">
</ng-select>
I am not sure if this a ng-select bug. This stackoverflow answer explains a bit about this error, I hope that helps figuring out what's wrong.
@spredemann Just out of interest, did the following work for loading the options?
[options]="(formOptions | async)?.categories"
There is another issue (#120) reporting a problem with using async. For me it is not entirely clear how this async pipe works when used as pipe in a component input. In their example an Observable was set as options, which is not supported by the ng-select component.
The 'expression changed after checked' is angular specific, I don't think this is a ng-select bug.
@basvandenberg I know angular has an issue with this but I have the feeling that you can fix it for the user by handling it on your component instead of forcing us to do so. Unless by doing so you are limiting the use of your component but I also don't know the issue in depth.
Hi you can add this
import { Componen, ChangeDetectorRef } from '@angular/core';
constructor(
private cdRef: ChangeDetectorRef
) {}
public ngDoCheck() {
this.cdRef.detectChanges();
}
@gieboyz No a good idea to put it inside ngDoCheck function. As, it will start infinite change detection loop.
Similar issue for input[type="file"][multiple] using a file.component rendered within a specialfile.component that passes down an array of new File(...)s. I've a map, $files, which a get files() {...} returns the .values() of while set files() {...} calls this.$files.set(file.name, file). This only seems to happen on the first time adding to the map (and therefore the array). This is a very difficult issue to resolve or workaround.
