帶遠程數據的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

檢查Segment API 文檔 。 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事件。

Answer 2

您應該改用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>