带有远程数据的 Ionic2 段

Question

我在页面中有以下代码来显示 Ionic 2 应用程序的 2 个片段。

  <div padding>
    <ion-segment [(ngModel)]="userType">
      <ion-segment-button value="latest">
        Latest
      </ion-segment-button>
      <ion-segment-button value="online" (ionChange)="getOnlineUsers()" >
        Online
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="userType">
    <ion-list *ngSwitchCase="'latest'">
      <ion-item *ngFor="let user of allUsers">
        <ion-avatar item-left>
          <img src="{{user.avatar}}">
        </ion-avatar>
        <h2>{{ user.title }}</h2>
        <p>{{ user.activityStamp | amFromUnix }} - {{user.online}}</p>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'online'">
      <ion-item *ngFor="let user of onlineUsers">
        <ion-avatar item-left>
          <img src="{{user.avatar}}">
        </ion-avatar>
        <h2>{{ user.title }}</h2>
      </ion-item>
    </ion-list>
  </div>

问题：

当我点击“在线”部分时，远程调用应该会发生仅在线用户。我正在使用 (ionChange) 但它没有任何影响。

Answer 1

您应该改用ionSelect (docs)：

<div padding>
    <ion-segment [(ngModel)]="userType">
      <ion-segment-button value="latest">
        Latest
      </ion-segment-button>
      <ion-segment-button value="online" (ionSelect)="getOnlineUsers()" >
        Online
      </ion-segment-button>
    </ion-segment>
  </div>

Answer 2

检查段 API docs。 ionChange 是由 ion-segment 而不是 ion-segment-button 发出的。

做：

 <ion-segment [(ngModel)]="userType">
      <ion-segment-button value="latest">
        Latest
      </ion-segment-button>
      <ion-segment-button value="online" (ionSelect)="getOnlineUsers()">
        Online
      </ion-segment-button>
    </ion-segment>

使用ionSelect 事件。