Question

以下是模板中的代码：

T(n) = T(n-1) + T(n-2) +...+ T(0).
T(n) = nT(n-1).

T(n) = O(n!).

和组件中的代码

<select id="regionSelection" [(ngModel)]="regionId"
        (change)="onChange($event.target.value)"
        class = "form-control">
              <option *ngFor="let r of regionsForDDL"
               value="{{ r.key }}">{{ r.value }}</option>
</select>

onChange(selectedValue: string) { }仅发送所选值。如何同时获取所选值和元素的id（此处为$event.target.value）？

感谢您的帮助

Answer 1

就这样传递：

(change)="onChange($event.target.id, $event.target.value)"

onChange(id: string, selectedValue: string) {

}

Answer 2

<强> HTML

(change)="onChange($event.target)"

<强> TS

onChange({ id, value }) {
   console.log(id, value);
}

或

onChange({ id, value: selectedValue }) {
  console.log(id, selectedValue);
}

https://stackblitz.com/edit/angular-7ysmjr?file=app%2Fapp.component.ts

查看有关解构分配语法如何工作的更多详细信息

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_function_parameter

Answer 3

或者通过添加模板变量并获取元素的值和id：

<select #mySelect id="regionSelection" [(ngModel)]="regionId"
        (change)="onChange(mySelect.value, mySelect.id)"
        class = "form-control">
              <option *ngFor="let r of regionsForDDL"
               value="{{ r.key }}">{{ r.value }}</option>
</select>

Answer 4

其他方式是使用#template变量，如下所示，

<select id="regionSelection" 
        [(ngModel)]="regionId" #target           // added #target
        (change)="onChange(regionId,target.id)"  // changed onChange(regionId,target.id)
         class = "form-control">

               <option *ngFor="let r of regionsForDDL"  
                        value="{{ r.key }}">{{ r.value }}</option>
</select>

onChange(value, id) {
   console.log(value);
   console.log(id);
}

Angular 2：当触发onChange时，如何检索所选值和select元素的id？

4 个答案: