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：我删除了ionic的默认导入，构造函数等。只是相关的代码。

Answer 1

这似乎是一个较小的语法问题。

您可以尝试将值包装在方括号中吗？

<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>

Answer 2

您应该做[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>

查看此demo

如何从数组的项目索引生成数组的离子选择？

2 个答案: