如何在角度的动态选项列表中设置所选项目答案

【问题标题】：How to set selected item in a dynamic options list in angular如何在角度的动态选项列表中设置所选项目
【发布时间】：2018-07-31 01:03:32
【问题描述】：

我对此感到非常困惑，我想做的是在我的 ionic 应用程序中使用 ngFor angular 指令创建的动态选项列表中显示“预选”选项

我现在有这个

  <ion-item>
    <ion-label>Number of Guests</ion-label>
    <ion-select>
      <ion-option *ngFor="let person of gests" value="{{person.id}}" selected="{person.id[2]}">{{person.id}}</ion-option>
    </ion-select>
  </ion-item>

如您所见，我试图在用户选择一个项目之前将其显示为预选项目。但我不太清楚该怎么做。有什么想法吗？

【问题讨论】：

我认为这是您想要使用 ng-if 的地方，以检查项目是否为索引 2，如果是，则设置其选定属性。
我认为你应该在元素上使用 ngModel。看这里：stackoverflow.com/a/44937133/9386610

标签： javascript angular ionic-framework

【解决方案1】：

你可以在离子选择组件中使用ngModel

// html
<ion-select [(ngModel)]="selectedPerson">...

// ts
selectedPerson = gests[0].id;

【讨论】：

【解决方案2】：

您可以在循环中添加索引，因此您可以选择哪个选项将是默认选项，只需指定索引：

<select>
  <option *ngFor="let person of gests; let idx = index" 
  [selected]=" idx == 0 ? true : false"></option>
</select>

【讨论】：

这实际上是我需要的，所以现在下一个挑战是使用位于我的 .ts 文件中的 js 变量，并将其打印为“idx”作为其值，以便“预先-select" 与此js变量匹配的项目。
嗨 Dolarpami，您可以将我作为示例中的“0”替换为您想要的值的变量名，同时它在同一个组件.ts 中定义
当然！当我必须这样做时，我的疑问就来了，因为，我怎样才能将 js 变量打印到 html 中，让我搜索，如果我找到解决方案，我会告诉你
ok 差不多了，所以我已经准备好将我的变量注入到 html 标记中，例如
......我这样做 {{variable}} 并且它有效，但是当我尝试替换“idx”时，我的应用程序崩溃、模板出现错误等。还有另一种显示方式吗？
您好 Dolarpami，您不必替换 idx 变量，这是通过循环所必需的，您必须替换条件中比较的变量（在示例中为“0”）。 [selected]=" idx == variable ? true : false"

......我这样做 {{variable}} 并且它有效，但是当我尝试替换“idx”时，我的应用程序崩溃、模板出现错误等。还有另一种显示方式吗？