Как я могу сгенерировать опцию ion из массива со значением, являющимся индексом элемента массива?

Question

Вот соответствующий код файлов settings.html и settings.ts.

export class SettingsPage {
  public teamA = [
    'Baner Team 1',
    'Baner Team 2',
    'Baner Team 3',
    'Baner Team 4',
    'Kothrud Team 1',
    'Kothrud Team 2',
    'Kothrud Team 3'
  ]

  public teamB = [
    'Baner Team 1',
    'Baner Team 2',
    'Baner Team 3',
    'Baner Team 4',
    'Kothrud Team 1',
    'Kothrud Team 2',
    'Kothrud Team 3'
  ]

  public SelectA;
  public SelectB;
}

<ion-item>
  <ion-label>Team A</ion-label>
  <ion-select [(ngModel)]="SelectA">
    <ion-option *ngFor="let team of teamA; let i = index" value=" {{ i }} "> {{ team }} </ion-option>
  </ion-select>
  <br>
</ion-item>
<ion-item>
  <ion-label>Team B</ion-label>
  <ion-select [(ngModel)]="SelectB">
    <ion-option *ngFor="let item of teamB; let z = index" value=" {{ z }} "> {{ item }} </ion-option>
  </ion-select>
</ion-item>
<br>
<br>
<ion-item>
  <h1>Team A: {{ SelectA }}</h1>
</ion-item>
<ion-item>
  <h1>Team B: {{ SelectB }}</h1>
</ion-item>

Я хочу сгенерировать параметры из массивов и значение из индексного номера массива. Итак, предположим, что выбран первый параметр, тогда значением этого конкретного параметра-иона будет его индекс, т. Е. 0.

PS: я удалил импорт по умолчанию, конструктор и т. Д. Просто соответствующий код.

Answer 1

Вы должны делать [value]="i". Если вы присваиваете переменную любому элементу html, она должна быть угловой [value]

<ion-select [(ngModel)]="SelectB">
    <ion-option *ngFor="let item of teamB; let z = index" [value]="z"> {{ item }} </ion-option>
  </ion-select>

Смотрите это демо

Answer 2

это кажется незначительной синтаксической проблемой.

Можете ли вы попробовать заключить значение в квадратные скобки так:

<ion-item>
  <ion-label>Team A</ion-label>
  <ion-select [(ngModel)]="SelectA">
    <ion-option *ngFor="let team of teamA; let i = index" [value]="i"> {{ team }} </ion-option>
  </ion-select>
  <br>
</ion-item>
<ion-item>
  <ion-label>Team B</ion-label>
  <ion-select [(ngModel)]="SelectB">
    <ion-option *ngFor="let item of teamB; let z = index" [value]="z"> {{ item }} </ion-option>
  </ion-select>
</ion-item>
<br>
<br>
<ion-item>
  <h1>Team A: {{ SelectA }}</h1>
</ion-item>
<ion-item>
  <h1>Team B: {{ SelectB }}</h1>
</ion-item>