Question

我使用了REACTIVE FORM。我的代码HTML：

<select class="form-control form-control-sm" formControlName="directionId" *ngFor="let item of list">
        <option value="{{item.id}}">{{item.name}}</option>
</select>

如何在Component.ts中获得值 {{item.name}} ？

Answer 1

尝试这样：

Working Demo

.html

<select (change)="onChange($event.target.value)">
    <option *ngFor="let item of list" value="{{item.id}}">{{item.name}} </option>
</select>

.ts

onChange(value: any){
    console.log(value) // this is id;
    let name = this.list.find(x => x.id == value).name
}

Answer 2

模板文件-绑定select element (change)上的更改事件并分配一个功能onChange

  <select (change)="onChange($event.target.value)">
      <option *ngFor="let item of list" value="{{item.id}}">{{item.value}}</option>
    </select>

ts类文件-定义函数onChange，该函数在以下情况下调用 change event起火

 onChange(value: any){
        console.log(value);
    }

Answer 3

确定要循环选择吗？如果不是这个原因，并且您想循环<option>，那么可以肯定会对您有所帮助。

component.html

 <select (change)="onChange($event.target.value)"  >
     <option  *ngFor="let item of list" value="{{item.id}}">{{item.name}}</option>
 </select>

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  list=[{
    'id':"1",
    'name':'ABC'
  },{
    'id':"2",
    'name':'ZXZ'}
  ];
  onChange(value: any){
        alert(value);
    }
}

Stackbliz在这里 https://stackblitz.com/edit/angular-n8gau2

Answer 4

    <select class="form-control form-control-sm" formControlName="directionId" *ngFor="let item of list" (change)="getSelectedOptionText($event)">
                       <option value="{{item.id}}">{{item.name}}</option>

      </select>

getSelectedOptionText(event: Event) {
   let selectedOptions = event.target['options'];
   let selectedIndex = selectedOptions.selectedIndex;
   let selectElementText = selectedOptions[selectedIndex].text;
   console.log(selectElementText)
}

Answer 5

从选择标记中删除 * ngFor ，因为我们只需要显示一个下拉菜单并显示多个选项即可。因此，请在 option 标签

中移动* ngFor

<select class="form-control form-control-sm" formControlName="directionId" >
        <option value="{{item.id}}" *ngFor="let item of list">{{item.name}}</option>
</select>

Answer 6

请尝试如下更改代码：

{{item.id}} to {{item.Name}}

如何将HTML中的{{value}}传递给component.ts

6 个答案: