Angular 4：如何在数据列表中获取选定值的索引答案

【问题标题】：Angular 4 : How to get index of selected value in a datalistAngular 4：如何在数据列表中获取选定值的索引
【发布时间】：2018-07-30 17:42:26
【问题描述】：

我使用反应形式。在项目列表（来自数据库）中，用户可以根据几个标准选择项目：参考编号、名称、制造商名称......

如果用户按参考号选择，将显示一个输入列表，其中包含 listOfItems 中的参考号列表，如果他按名称选择，将显示一个输入列表，其中包含来自 listOfItems 的名称列表listOfItems 等等...

例如，当用户在 datalist 中按名称选择项目并进行验证时，我想将其发送并显示在具有其特征的另一个组件中。因此，要知道哪个项目已被选中并访问其所有特征，我需要在数据列表中获取所选项目的索引。

component.html（按名称选择的项目）：

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
    <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
    <datalist id="itemsName">
      <option *ngFor="let ref of listOfItems">{{ref.itemDesignation.input}}</option>
    </datalist>
  </div>

在component.ts中，可以通过：

访问输入的用户值

this.valueSelected = this.formGroupItemSelection.controls.itemNameSelected.value

但是如何获取索引呢？

--更新-- 我尝试在我的输入列表中添加 "[(ngModel)]='itemSelected'" ：

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
    <input list="itemsName" id="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected" [(ngModel)]="itemSelected">
    <datalist id="itemsName">
        <option *ngFor="let ref of listOfItems" [ngValue]="ref" >{{ref.itemDesignation.input}}
        </option>
</datalist>

然后在我的component.ts "itemSelected"的控制台中调用，但是没有取"ref"的值> :

addItem() {
    console.log(this.itemSelected);
}

查了好几个题目都没找到解决办法，看来问题出在datalist上……

【问题讨论】：

标签： javascript html angular

【解决方案1】：

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
    <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
    <datalist id="itemsName">
      <option *ngFor="let ref of listOfItems;let i = index" [ngValue]="i">{{ref.itemDesignation.input}}</option>
    </datalist>
  </div>

【讨论】：

以及如何在component.ts中获取？
你能帮我绑定它们吗？ @Chellapan
例如，我在输入列表中添加了“[(ngModel)]="itemSelected"，然后在我的component.ts的控制台中调用了“itemSelected”，但是它没有取值“我”的
是的，我看到了，因为您使用数据列表，您选择的任何内容都将在 innerHTML 中，这就是为什么很难获得 id 的原因
那么没有其他方法可以绕过这个吗？与选择不同，我真的需要数据列表来进行过滤搜索。

【解决方案2】：

你可以使用findIndex函数

let idx = listOfItems.findIndex((item) => item.itemDesignation.input === this.valueSelected)

这将迭代listOfItems 数组，直到找到其itemDesignation.input 匹配this.valueSelected 的数组

【讨论】：

我不能这样做，因为两个项目可能有相同的名称

【解决方案3】：

以<option *ngFor="let ref of listOfItems">

并将其更改为<option *ngFor="let ref of listOfItems;let i = index">

添加一个发送模板变量+索引的点击事件，将该方法添加到您的组件中。现在当用户点击一个选项时，它将发送到组件。

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
        <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
        <datalist id="itemsName">
          <option #selectedOption *ngFor="let ref of listOfItems; let i = index" (click)="selectedOption(i,selectedOption)">{{ref.itemDesignation.input}}</option>
        </datalist>
      </div>

【讨论】：

【解决方案4】：

以<option *ngFor="let ref of listOfItems">

并将其更改为<option *ngFor="let ref of listOfItems;let i = index">

现在您可以引用变量 {{i}} 来获取索引。

编辑：向您展示如何在组件中查看 i。

HTML：

<datalist ...>
    <ng-container *ngFor="let ref of listOfItems; let i = index">
        <option (click)="funtionThatNeedsIndex(i)">{{ref.itemDesignation.input}}</option>
    </ng-container>
</datalist>

组件.ts：

functionThatNeedsIndex(index) {
    console.log(index);
}

【讨论】：

我将拥有数据列表中所有项目的索引，但我需要所选值的索引。如何在 component.ts 中获取？
阅读@Chellappan 的回答。他展示了如何将 {{i}} 绑定到列表中的选定值。
@Josept 当您将ngModel 设置为{{ i }} 时，这应该是存储为用户选择的值，而不是条目的实际文本。
@Josept 我已经在我的答案中进行了编辑，尝试复制粘贴它并查看当您从下拉列表中选择一个项目时是否调用了函数 functionThatNeedsIndex。
不，这不叫我在控制台中看不到任何显示。