ionic3 - Ionic4 与 Ionic3 中的离子段
问题描述
我有一段下面给出的表格Ionic3
和下面给出的代码。谁能告诉我如何在Ionic4
.
Ionic3 代码
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only menuToggle="user-menu">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only (click)="doLogout()">
<ion-icon name="ios-log-out" color="primary"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<div text-center (click)="editProfile()">
<img class="user-avatar" src="assets/imgs/avatar.svg" />
</div>
<ion-toolbar>
<ion-segment [(ngModel)]="category" color="primary">
<ion-segment-button value="official">
Official Info
</ion-segment-button>
<ion-segment-button value="personal">
Personal Info
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category">
<ion-list *ngSwitchCase="'personal'">
<ion-item>
<h4>First Name</h4>
<p>X</p>
</ion-item>
<ion-item>
<h4>Last Name</h4>
<p>YZ</p>
</ion-item>
<ion-item>
<h4>Phone No</h4>
<p>(541) 754-3010</p>
</ion-item>
<ion-item>
<h4>Address</h4>
<p>XYZ 711-2880 Nulla St. Mankato Mississippi 96522</p>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'official'">
<ion-item>
<h4>User Id</h4>
<p>Xyz</p>
</ion-item>
<ion-item>
<h4>Email</h4>
<p>Xyz@abc.com</p>
</ion-item>
<ion-item>
<h4>Employer</h4>
<p>Amazon</p>
</ion-item>
<ion-item>
<h4>Company Name</h4>
<p>Amazon India</p>
</ion-item>
<ion-item>
<h4>Company Id</h4>
<p>{{nowDate|date:'hh:mm:a'}}</p>
</ion-item>
</ion-list>
</div>
</ion-content>
离子 4 代码
<ion-toolbar>
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
在 Ionic4 办公文档中,他们只提到了创建分段按钮,并没有指定如何基于此填充列表。是否类似于Ionic3
使用*ngSwitchCase
解决方案
您可以像以前一样继续使用*ngSwitch
,您需要做的是在事件中(ionChange)="segmentChanged($event)"
更改您想要显示的值,就像以前使用[(ngModel)]="category"
.
在组件中添加此方法:
segmentChanged(event) {
this.category = event;
}
“事件”是您放入ion-segment-button value="camera"
.
推荐阅读
- node.js - 以管理员身份运行 node.js 脚本/访问受保护的文件
- docker - 将来自 k8s 容器的所有网络流量路由到同一个 pod 中的另一个容器
- reactjs - Redux 存储(AsyncStorage 引擎)在调用 store.dispatch 时冻结 iPhone
- javascript - Javascript 在类方法中使用匿名函数
- vb.net - 在 VB.net 中使用 MSscriptControl 添加对象会导致 Specified cast is not valid 错误
- libreoffice-writer - 在 LibreOffice Writer 中使用列表框的用户选择作为条件
- java - Android:NDEF_DISCOVERED 的意图过滤器在 nfc 窗口中打开应用程序而不是运行应用程序
- javascript - Visual Studio Code:防止它删除不需要的代码
- nginx - 在上游 nginx 中找不到主机
- react-native - 如何使用道具从一个屏幕导航到另一个屏幕?