Question

我正在尝试使用Ionic 2构建连接/注册页面。当然，我有一个result[2]和一个login.html文件。

当我尝试将login.ts置于两个<ion-select>之间<div>切换时，我遇到了问题。错误为<ion-list>

有一些我不理解且无法解决的问题。我知道这里有很多Q＆amp; A。我想我尝试了所有这些，但没有人帮助过我。

我理解Angular每轮检查两次更改，并且当这些更改不返回相同结果时会触发此错误。我只是不明白为什么这段代码应该有这个问题，或者我如何解决它。我不想禁用开发模式，所以如果您对如何重新编写代码有任何想法以避免这种情况，那么您的建议将受到欢迎。 TIA。

login.ts

EXCEPTION: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

login.html - 工作但无用

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>

Answer 1

我无法确定您的确切问题，但您可以尝试其他方法。也许是添加/删除DOM的东西..

尝试删除您的开关/案例并改为使用[hidden]属性：

成分：

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

模板：

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

// ...

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

Ionic 2 ngSwitch + <ion-select> = EXCEPTION：检查后表达式发生了变化

1 个答案: