相互依赖的下拉菜单：'表达式在检查后发生了变化'（Angular2 + Polymer）

Question

我理解Angular每轮检查两次更改，并且当这些更改不返回相同结果时会触发此错误。我只是不明白为什么这段代码应该有这个问题，或者我如何解决它。

示例代码：https://github.com/dirtysanchez69/issue-angular2-polymer-2

我有2个下拉列表，其中一个选项填充其选项，具体取决于其他选定的值。 （这没有错误）：

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

数据就在构造函数中：

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
  };
}

但是，如果我将[selected]值添加到item-listbox（默认选择的索引），则会给出错误： EXCEPTION：选中后表达式已更改。以前的价值：''。现值：'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>

有更好的方法吗？这有什么问题？

Answer 1

正如Günter Zöchbauer提到here，处于阴影模式的聚合物与Angular2不相称。全局启用Polymer的阴影模式解决了这个问题。

@vaadin/angular2-polymer（此处使用的集成库）背后的团队了解并致力于改进阴暗的dom适配器。查看Issue。

如果您遇到此类问题，请将此脚本添加到index.html

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

Answer 2

大多数情况下，如果出现此类错误，您需要强制使用ChangeDetectorRef及其detectChanges方法进行更改检测。

以下是一个示例：

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

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

看到这个问题：

• How to dirty-check iterable component property in Angular2?