相互依賴的下拉菜單：'檢查後表達式已經改變'（Angular2 + Polymer）

我知道Angular每輪檢查兩次更改，並且當這些錯誤不會返回相同的結果時觸發此錯誤。我只是不明白爲什麼這個代碼應該有這個問題，或者我該如何解決它。相互依賴的下拉菜單：'檢查後表達式已經改變'（Angular2 + Polymer）

示例代碼可在：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 
    }; 
}

但是，如果我一個[選擇]值添加到item-listbox（默認選定索引），它會給出錯誤：EXCEPTION：檢查後表達式已更改。以前的值：''。當前值：「西拉，波爾多」

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

有沒有更好的方式來做到這一點？這裏有什麼問題？

來源

2016-06-28 santi-elus

Whee你添加一個'[選擇]'值這個腳本添加到您的index.html？ –

在論文列表框（參考最後的代碼片段） –

大多數情況下，出現這樣的錯誤時，您需要強制使用ChangeDetectorRef及其detectChanges方法進行更改檢測。

這裏有一個例子：

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

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

看到這個問題：

How to dirty-check iterable component property in Angular2?

來源

2016-06-28 08:01:53

由於Günter Zöchbauer黑幕模式提到here，聚合物沒有發揮好與Angular2。在全球啓用聚合物的陰影模式解決了這個問題。

@vaadin/angular2-polymer（此處使用的集成庫）背後的團隊意識到並致力於改進shady dom適配器。檢查出Issue。

如果您遇到這樣的困難，

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

來源

2016-06-28 16:37:06

相互依賴的下拉菜單：'檢查後表達式已經改變'（Angular2 + Polymer）

回答

相關問題