web-dev-qa-db-ja.com

Angular 2選択オプション（ドロップダウン）-関数で使用できるように変更時に値を取得する方法は？

いくつかの値を含むドロップダウンを作成しようとしています。

ただし、値を選択する際に、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)でそれを使いたいです。

ありがとう

javascripthtmlangulartypescript
35
user1354934

私の答えは少し遅れていますが、簡単です。しかし、将来誰かを助けるかもしれません。 $ event（現時点では最新）を使用して、4.4.3、5.1 +、6.x、7.xなどのangularバージョンを試しました。

テンプレート：

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

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

27
Paul Samsotha
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];
    }
  }
}

次に、ビューから選択したobjを持つthis.selectedObjを再生します。

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>
3
Rinold

別の解決策は、値としてオブジェクトのIDを言及していない場合は、オブジェクト自体を値として取得できます：注：[値] [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]ディレクティブの代わりに[値]上記のscanerio

例：

  <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;  
    }
2
Nabin Kumar Khatiwada

テンプレート/ 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ディレクティブなしでこのイベントを使用することはできません

1
VIKAS KOHLI