Ionic 2 ngSwitch + <ion-select> = EXCEPTION：檢查後的表達式發生了變化

Question

我試圖用Ionic 2建立連接/註冊頁面。當然，我有一個login.html和一個login.ts文件。

當我嘗試將<ion-select>放入<div>在兩個<ion-list>之間切換時，我遇到問題。錯誤是EXCEPTION: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

有一些我不明白，不能修復。我知道這裏有很多關於這個問題的Q & A.我想我嘗試了他們，但沒有人幫助我。

我知道Angular會在每輪中檢查兩次更改，並且在這些錯誤不會返回相同結果時觸發此錯誤。我只是不明白爲什麼這個代碼應該有這個問題，或者我該如何解決它。我不想禁用開發模式，所以如果您對如何重寫代碼以避免這種情況有任何想法，您的建議將受到歡迎。 TIA。

login.ts

import {Component} from '@angular/core'; 

@Component({ 
    templateUrl: 'build/pages/login/login.html' 
}) 
export class LoginPage { 
    public loginSwitch:string = 'login'; // Default ion-list to show at startup 
    public userCredentials = { 
     name: '', 
     email: '', 
     password: '', 
     type: 'individual' 
    } 

    constructor() { 
    } 

    login(formData) { 
     console.log(formData); 
    } 

    register(formData) { 
     console.log(formData); 
    } 
} 

的login.html - 工作但不實用

<ion-content padding class="login"> 
    <!-- *** I'm outside ngSwitch and working ** --> 
    <ion-item> 
     <ion-label>Are you?</ion-label> 
     <ion-select [(ngModel)]="userCredentials.type"> 
      <ion-option value="individual">An individual</ion-option> 
      <ion-option value="company">A company</ion-option> 
     </ion-select> 
    </ion-item> 
    <!-- **************************************** --> 
    <div center> 
     <ion-segment [(ngModel)]="loginSwitch"> 
      <ion-segment-button value="login"> 
       Login 
      </ion-segment-button> 
      <ion-segment-button value="register"> 
       Register 
      </ion-segment-button> 
     </ion-segment> 
    </div> 
    <div [ngSwitch]="loginSwitch"> 
     <ion-list *ngSwitchWhen="'login'"> 
      <p style="text-align:center;">YOUR LOGIN CREDENTIALS</p> 
      <ion-list> 
       <ion-item> 
        <ion-input type="email" placeholder="Email" [(ngModel)]="userCredentials.email"></ion-input> 
       </ion-item> 
       <ion-item> 
        <ion-input type="password" placeholder="Password" [(ngModel)]="userCredentials.password"></ion-input> 
       </ion-item> 
      </ion-list> 
      <button block (click)="login(userCredentials)">Log me in</button> 
     </ion-list> 
     <ion-list *ngSwitchWhen="'register'"> 
      <p style="text-align:center;">CREATE YOUR PROFILE</p> 
      <ion-list> 
       <ion-item> 
        <ion-input type="text" placeholder="Name" [(ngModel)]="name"></ion-input> 
       </ion-item> 
       <ion-item> 
        <ion-input type="email" placeholder="Email" [(ngModel)]="userCredentials.email"></ion-input> 
       </ion-item> 
      </ion-list> 
      <button block (click)="register(userCredentials)">Register</button> 
     </ion-list> 
    </div> 
</ion-content> 

的login.html - 有用的，但沒有工作

<ion-content padding class="login"> 
    <div center> 
     <ion-segment [(ngModel)]="loginSwitch"> 
      <ion-segment-button value="login"> 
       Login 
      </ion-segment-button> 
      <ion-segment-button value="register"> 
       Register 
      </ion-segment-button> 
     </ion-segment> 
    </div> 
    <div [ngSwitch]="loginSwitch"> 
     <ion-list *ngSwitchWhen="'login'"> 
      <p style="text-align:center;">YOUR LOGIN CREDENTIALS</p> 
      <ion-list> 
       <ion-item> 
        <ion-input type="email" placeholder="Email" [(ngModel)]="userCredentials.email"></ion-input> 
       </ion-item> 
       <ion-item> 
        <ion-input type="password" placeholder="Password" [(ngModel)]="userCredentials.password"></ion-input> 
       </ion-item> 
      </ion-list> 
      <button block (click)="login(userCredentials)">Log me in</button> 
     </ion-list> 
     <ion-list *ngSwitchWhen="'register'"> 
      <p style="text-align:center;">CREATE YOUR PROFILE</p> 
      <ion-list> 
       <ion-item> 
        <ion-input type="text" placeholder="Name" [(ngModel)]="name"></ion-input> 
       </ion-item> 
       <ion-item> 
        <ion-input type="email" placeholder="Email" [(ngModel)]="userCredentials.email"></ion-input> 
       </ion-item> 
       <!-- *** I'm inside ngSwitch and NOT working ** --> 
       <ion-item> 
        <ion-label>Are you?</ion-label> 
        <ion-select [(ngModel)]="userCredentials.type"> 
         <ion-option value="individual">An individual</ion-option> 
         <ion-option value="company">A company</ion-option> 
        </ion-select> 
       </ion-item> 
       <!-- **************************************** --> 
      </ion-list> 
      <button block (click)="register(userCredentials)">Register</button> 
     </ion-list> 
    </div> 
</ion-content> 

Answer 1

我不能說出你確切的問題，但你可以嘗試另一種方法。 也許它的東西與添加/刪除/從DOM ..

嘗試刪除您的開關/箱，並使用[hidden]屬性改爲：

組件：

private login: boolean = true; /* true = show login, false = show register */ 

模板：

<ion-list [hidden]="!login"><!-- login --> 

// ... 

<ion-list [hidden]="login"><!-- register -->