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

bitflinger · June 6, 2017, 5:55pm

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 *************************************

github.com

bitflinger/IonicSegmentWoes/blob/master/SegmentButtonIssues/src/pages/home/home.ts

import { Component, ChangeDetectorRef } from '@angular/core';
import { NavParams, ViewController, Platform } from 'ionic-angular';
import { FormBuilder, Validators, FormGroup, FormControl, FormArray } from '@angular/forms';
import { Observable } from 'rxjs';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    public editFormGroup: FormGroup;
    public drinkTypes = [];

    public drink = {
        drinkType: {
            id: 2,
            name: 'tea'
        }

This file has been truncated. show original

rapropos · June 6, 2017, 7:53pm

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.

bitflinger · June 6, 2017, 9:27pm

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.

rapropos · June 6, 2017, 9:32pm

There are several workarounds suggested in #6923.