Question

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

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

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

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 中，In可以使用以下命令访问输入的用户值：

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); }

我查看了几个主题，但没有找到解决方案，问题似乎出在数据列表中...

Answer 1

var UserSchema = new Schema({
        name: {type:String, required: true},
        username: { type: String },//not mandatory, so removed required. 
        age: { type: String, required: true }
});

Answer 2

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

Component.ts：

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

Answer 3

您可以使用findIndex功能

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

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

Answer 4

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

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

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

<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：如何在数据列表中获取选定值的索引

4 个答案: