Angular 2 选择选项（下拉菜单） - 如何获取更改值以便可以在函数中使用？

Posted 2023-02-22

【中文标题】Angular 2 选择选项（下拉菜单） - 如何获取更改值以便可以在函数中使用？

【英文标题】：Angular 2 select option (dropdown) - how to get the value on change so it can be used in a function?

【发布时间】：2017-01-22 22:02:22

【问题描述】：

我正在尝试使用一些值构建一个下拉列表。

但是，在选择一个值时，我想进行一个带有 id 的 API 调用。

在我的 component.ts 中，我有一个值数组：

values = [
   id: 3432, name: "Recent" ,
   id: 3442, name: "Most Popular" ,
   id: 3352, name: "Rating" 
];

在我的模板中，我按如下方式使用该数组：

<select>
  <option *ngFor="let v of values" [value]="v">  
    v.name
  </option>
</select>

但是，在从下拉列表中选择一个值时，如何访问 id 属性？我想在我的函数getPhotosByType(id)中使用它。

谢谢

【问题讨论】：

我通过调用[attr.value]="v"而不是[value]="v"来实现您想要的结果

【参考方案1】：

我的回答有点晚但很简单；但将来可能会帮助某人； 我确实使用 $event（目前最新）尝试了 4.4.3、5.1+、6.x、7.x、8.x、9.x 和 10.x 等角度版本

模板：

<select (change)="onChange($event)">
    <option *ngFor="let v of values" [value]="v.id">v.name</option>
</select>

TS

export class MyComponent 
  public onChange(event): void   // event will give you full breif of action
    const newVal = event.target.value;
    console.log(newVal);
  

【讨论】：

为我工作。谢谢。

只要 select 的值发生变化，change 就会起作用，如果我们想在任何时候选择任何值时进行跟踪，即使它是当前值？ @mumair

@MayankSingh 以上 sn-p 将在用户更改值时很好地工作。如果我理解正确，您想设置默认值或者您想比较所选值是否等于当前（预定义）值。你能进一步解释一下吗？

我需要在从下拉列表中选择任何值时将列添加到表中，但是可以多次添加列，在这种情况下，我可以交替添加列，但不能连续添加。所以当我选择一个下拉项目2次是一行时，不会发生变化@mumair

我希望我可以编辑结束标签 =>

【参考方案2】：

您需要在 select 上使用 Angular 表单指令。你可以通过ngModel 做到这一点。例如

@Component(
  selector: 'my-app',
  template: `
    <h2>Select demo</h2>
    <select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of cities" [ngValue]="c"> c.name </option>
    </select>
  `
)
class App 
  cities = ['name': 'SF', 'name': 'NYC', 'name': 'Buffalo'];
  selectedCity = this.cities[1];

  onChange(city) 
    alert(city.name);
  

(ngModelChange) 事件侦听器在所选值更改时发出事件。在这里你可以连接你的回调。

请注意，您需要确保已将 FormsModule 导入应用程序。

这是Plunker

【讨论】：

如果您的 selectedCity 在初始状态下未定义，您只需执行以下操作即可定义一个显示“选择城市”的禁用选项：<option [ngValue]="undefined" disabled> Select a city </option>

【参考方案3】：

values_of_objArray = [
   id: 3432, name: "Recent" ,
   id: 3442, name: "Most Popular" ,
   id: 3352, name: "Rating" 
];

private ValueId : number = 0 // this will be used for multi access like 
                             // update, deleting the obj with id.
private selectedObj : any;

private selectedValueObj(id: any) 
  this.ValueId = (id.srcElement || id.target).value;
  for (let i = 0; i < this.values_of_objArray.length; i++) 
    if (this.values_of_objArray[i].id == this.ValueId) 
      this.selectedObj = this.values_of_objArray[i];
    
  

现在使用this.selectedObj，它具有从视图中选择的 obj。

html：

<select name="values_of_obj" class="form-control" [(ngModel)]="ValueId"  
        (change)="selectedValueObj($event)" required>

  <option *ngFor="let Value of values_of_objArray"
          [value]="Value.id">Value.name</option>    
</select>

【参考方案4】：

另一种解决方案是，如果您没有提及对象的 id 作为值，则可以将对象本身作为值： 注意：[value] 和 [ngValue] 都可以在这里使用。

<select (change)="your_method(values[$event.target.selectedIndex])">
  <option *ngFor="let v of values" [value]="v" >  
    v.name
  </option>
</select>

在ts中：

your_method(v:any)
  //access values here as needed. 
  // v.id or v.name

注意：如果您使用的是响应式表单并且您想在表单提交上捕获选定的值， 您应该在上面的扫描仪中使用 [ngValue] 指令而不是 [value]

例子：

  <select (change)="your_method(values[$event.target.selectedIndex])" formControlName="form_control_name">
      <option *ngFor="let v of values" [ngValue]="v" >  
        v.name
      </option>
    </select>

在ts中：

form_submit_method()
        let v : any = this.form_group_name.value.form_control_name;  
    

【参考方案5】：

模板/HTML 文件 (component.ts)

<select>
 <option *ngFor="let v of values" [value]="v" (ngModelChange)="onChange($event)">  
    v.name
  </option>
</select>

打字稿文件（component.ts）

values = [
   id: 3432, name: "Recent" ,
   id: 3442, name: "Most Popular" ,
   id: 3352, name: "Rating" 
];

onChange(cityEvent)
    console.log(cityEvent); // It will display the select city data

(ngModelChange) 是 ngModel 指令的 @Output。它在模型更改时触发。如果没有 ngModel 指令，您将无法使用此事件

【参考方案6】：

<select [(ngModel)]="selectedcarrera" (change)="mostrardatos()" class="form-control" name="carreras">
    <option *ngFor="let x of carreras" [ngValue]="x"> x.nombre </option>
</select>

在ts中

mostrardatos()