Ionic 4 与 Ionic 3 中的离子段

Question

我在 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 官方文档中，他们只提到了创建分段按钮，并没有具体说明如何基于此填充列表。使用*ngSwitchCase

是否类似于Ionic3

Answer 1

您可以像以前一样继续使用 *ngSwitch，您需要做的是在事件中 (ionChange)="segmentChanged($event)" 更改您想要显示的值，就像您以前使用 [(ngModel)]="category" 所做的那样.

在组件中添加此方法：

segmentChanged(event) {
  this.category = event;
}

"event" 是您在 ion-segment-button value="camera".

中输入的大小写值

更多信息：https://angular.io/api/common/NgSwitchCase

Ionic 4 与 Ionic 3 中的离子段

Ion-Segment in Ionic4 vs Ionic3

ionic3

ionic4

ion-segment

Ionic3 代码

离子 4 代码