Inter-dependent dropdown menus: 'Expression has changed after it was checked' (Angular2 + Polymer)

Question

I understand that Angular checks for changes twice per round, and that this error is triggered when these do not return equal results. I just don't see why this code should have this problem, or how I can fix it.

example code available at: https://github.com/dirtysanchez69/issue-angular2-polymer-2

I have 2 dropdowns where one has its options populated depending on the other's selected value. (this works with no errors):

<paper-dropdown-menu label="Fruit" #fruitDropdown >
  <paper-listbox 
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<paper-dropdown-menu label="Types (depends on Fruit)" [disabled] = "!fruitDropdown.value">
  <paper-listbox
  class="dropdown-content">
    <paper-item *ngFor="let option of 
          (( fruitDropdown.value ) 
           ? dropdownOptions.type[fruitDropdown.value] 
           : [] )">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

The data is right there in the constructor:

constructor() { 
  this.dropdownOptions = {
    fruit: ['apple', 'grape', 'banana'],
    type : {
      apple: ['granny smith', 'red delicious', 'macintosh'],
      grape: ['sirah', 'bordeaux'],
      banana: ['plaintain', 'baby', 'manzano']
    }
  };
  this.userData = {
    fruitSelection: 1,
    typeSelection: 1
  };
}

However, if I add a [selected] value to the item-listbox (default selected index), it gives the error: EXCEPTION: Expression has changed after it was checked. Previous value: ''. Current value: 'sirah,bordeaux'

<paper-dropdown-menu label="Fruit" #fruitDropdown >
  <paper-listbox 
  [selected]="userData.fruitSelection"
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Is there a better way to do this? What's the problem here?

Whee do you add a `[selected]` value? – Günter Zöchbauer Jun 28 '16 at 07:52 — Günter Zöchbauer, Jun 28 '16 at 07:52
On the paper-listbox (refer to last code snippet) – santi-elus Jun 28 '16 at 08:00 — santi-elus, Jun 28 '16 at 08:00

score 1 · Answer 1 · edited May 23 '17 at 11:54

As Günter Zöchbauer mentioned here, Polymer in shady mode does not play nice with Angular2. Enabling Polymer's shadow mode globally solved this issue.

The team behind @vaadin/angular2-polymer (the integration library used here), is aware of and working on improving the shady dom adapter. Check out the Issue.

If you are experiencing difficulties of this kind, add this script to your index.html

window.Polymer = {
  dom: 'shadow',
  lazyRegister: true
};

score 0 · Answer 2 · edited May 23 '17 at 12:02

Most of the time, with such an error, you need to force the change detection leveraging the ChangeDetectorRef and its detectChanges methods.

Here is a sample:

@Component({
  (...)
})
export class SomeComponent {
  constructor(private cdr: ChangeDetectorRef) {
  }

  someMethod() {
    this.cdr.detectChanges();
  }
}

See this question:

How to dirty-check iterable component property in Angular2?

Inter-dependent dropdown menus: 'Expression has changed after it was checked' (Angular2 + Polymer)

2 Answers2