Question

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

但是，在选择值时，我想进行一个带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)中使用它。

由于

Answer 1

我的答案有点迟，但很简单;但未来可能会帮助别人; 我使用 $ event （目前最新）尝试了角度版本，如4.4.3,5.1 +，6.x和7.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);
  }
}

Answer 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

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

Answer 4

另一个解决方案是，如果你没有提到它的id为值，你可以将对象本身作为值： 注意：[value]和[ngValue]都适用于此。

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

在ts：

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

注意：如果您使用的是被动形式，并且想要在表格提交上捕捉选定的值，您应该在上面的scanerio中使用 [ngValue] 指令代替 [value]

示例：

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

在ts：

PostgreSQL

Answer 5

模板/ HTML文件（component.ts）

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

Typescript文件（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指令，则不能使用此事件

Answer 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(){

}

Angular 2选项（下拉列表） - 如何在变化时获取值，以便可以在函数中使用？

6 个答案: