Question

我有以下用于修改表单的代码：

    <select id="inputState"  class="form-control" [(ngModel)]="seletRoleId"  formControlName="roleName">
      <option *ngFor="let item of roleList" seletRoleId="item.id" [value]="item.name"> {{item.name}}
      </option>
    </select>

但是我需要获得item.name和item.id。

此代码[value]="item.name"用于显示用户RoleName进行编辑。

如何从下拉列表中获取值id和name？

Answer 1

您可以附加一个单击，以便每次单击一个选项时，它将把该项目发送给一个函数。然后，在该功能中，您可以访问整个项目。

<option *ngFor="let item of roleList" seletRoleId="item.id"
(click)=getDetails(item) [value]="item.name"> 
  {{item.name}}
 </option>

然后在您的控制器中提供一个看起来像这样的函数，使您可以根据自己的意愿对项目进行操作。将其存储为Component Variable或在函数中完成所需的工作。

public currentSelection;

public getDetails(item): void
{
    this.currentSelection = item;

    console.log(item.id);
    console.log(item.name);
}

Answer 2

您可以改用一个对象，就像您可以获取名称和ID一样

<option ... [value]="{name: item.name, id: item.id} | json">

您可以解析结果以获取正确的对象。

简单的例子

changeConsole() {
  console.log(JSON.parse(this.selectRole).id);
  console.log(JSON.parse(this.selectRole).name);
}

<select [(ngModel)]="selectRole" (change)="changeConsole()">
  <option [value]="{name: 'toto', id: 11} | json"> yo 11
  </option>
  <option [value]="{name: 'titi', id: 13} | json"> yo 13
  </option>
</select>

从下拉列表中获取拖曳值

2 个答案: