Looped Swipeable Segment Children

Ionic Framework Ionic Angular
1

Hi, I’m trying to implement a swipeable segment component following the example on the doc:

<ion-segment>
  <ion-segment-button value="first" content-id="first">
    <ion-label>First</ion-label>
  </ion-segment-button>
  <ion-segment-button value="second" content-id="second">
    <ion-label>Second</ion-label>
  </ion-segment-button>
  <ion-segment-button value="third" content-id="third">
    <ion-label>Third</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment-view>
  <ion-segment-content id="first">First</ion-segment-content>
  <ion-segment-content id="second">Second</ion-segment-content>
  <ion-segment-content id="third">Third</ion-segment-content>
</ion-segment-view>

Now when I make the buttons and content from a loop, the buttons and content aren’t synced when switching between them:

<ion-segment>
    <ion-segment-button *ngFor="let item of ['first', 'second', 'third']"
    [value]="item" [contentId]="item">
      <ion-label>{{ item }}</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-segment-view>
    <ion-segment-content *ngFor="let item of ['first', 'second', 'third']"
    [id]="item">{{ item }}</ion-segment-content>
  </ion-segment-view>

Can someone point out what I’m doing wrong?