Ionic Version 3 Segment Button Binding Error (example works in Ionic ver 2)


#1

Any Help would be GREATLY Appreciated - Thanks!!!

When binding a segment button using these requirements:

  • bound by FormGroup
  • segment button values (choices) come async from database
  • segment button bound with initial value (string)

I get this error - ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘false’. Current value: ‘true’.

I very simplified version, which throws the error, is shown below and available at https://github.com/bitflinger/IonicSegmentWoes

HTML *************************************
https://github.com/bitflinger/IonicSegmentWoes/blob/master/SegmentButtonIssues/src/pages/home/home.html

CODE *************************************


Ion-segment: dynamically generated segment buttons with validation not working
Event doesnt trigger on RxJs subscribe
#2

Removing the ngIf on the form will fix this problem. Your code will still break in production. You need to make any property accessed from the template public.


#3

Thanks Rapropos, I appreciate the input!

Removing the *ngIf eliminated the error… However, any segment-button added after the page-view is still un-bindable.

To illustrate. I updated the GitHub with coffee & tea loaded before page-view and milk loaded after. The results are coffee/tea are bindable and milk is not.

Why this is important… many times I need to get segment button choices asynchronously.


#4

There are several workarounds suggested in #6923.