angular - 登录侧菜单不显示
问题描述
我最近开始学习 Ionic 3 和 Angular 并遇到了一些问题。我想使用conference template
Ionic 提供的实现登录表单,但无论我做什么,登录页面都不会显示。单击模板的侧边菜单可以找到登录页面。
这是我的旧 HTML 模板:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic logo">
</div>
<form #loginForm="ngForm" novalidate>
<ion-list>
<ion-item>
<ion-label stacked color="primary">Email</ion-label>
<ion-input [(ngModel)]="login.email" name="email" type="email" #email="ngModel" spellcheck="false"
autocapitalize="off"
placeholder="Your email" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="email.valid || submitted == false" color="danger" padding-left>
Email is required
</p>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" placeholder="Your password" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<p padding class="text-ios-danger">
{{loginError}}
</p>
<ion-row responsive-sm>
<ion-col>
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
</ion-col>
<ion-col>
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
</ion-col>
</ion-row>
</form>
</ion-content>
这是我的新的:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="top">
<img src="assets/logo.png" >
</div>
<!-- Social Login Buttons -->
<div class="bottom">
<div class="form" *ngIf="mode == 'main'">
<div>
<form [formGroup]="emailPasswordForm">
<ion-list>
<ion-item no-lines>
<ion-input type="email" formControlName="email" placeholder="Email Address"></ion-input>
</ion-item>
<ion-item no-lines>
<ion-input type="password" formControlName="password" placeholder="Create Password"></ion-input>
</ion-item>
<button ion-button icon-left class="dark" tappable (click)="login()" [disabled]="!emailPasswordForm.valid">LOGIN</button>
</ion-list>
</form>
</div>
</div>
</div>
</ion-content>
我将不胜感激任何建议,谢谢。
解决方案
推荐阅读
- php - 如何根据一串数组创建数组目录树
- php - 拥有一个包含从其他表计算的数据的数据库表是不好的做法吗?
- ios - 在 Swift 中执行后台保存
- google-cloud-firestore - 将图像上传到存储并更新配置文件
- ruby - 如何使用 Ruby 调试动态定义的方法?(在 repl 会话中创建的方法)
- c++ - 关于向量的调整大小和保留的奇怪记忆行为
- java - 使用 java 获取 Qubole 数据行明智
- html - Vuetify Offset 不创建任何偏移量
- regex - 检查第 1 列的值是否存在于第 2 列的任何位置,将结果写入第 3 列(CSV 文档)
- c - STM32 应用程序有时不运行,仍然在 DFU