<tr (click)="onRowClick(myDropDownList.value)">
<td>
<select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)">
<option *ngFor="let n of numbers" [value]="n">{{n}}</option>
</select>
</td>
</tr>
드롭 다운 목록에서 선택한 값을 가져 와서 onRowClick 함수에 할당하려고했습니다. 하지만 myDropDownList은 언제나 undefined 인 것처럼 보입니다. 나는 여기서 무엇이 잘못 될지 궁금해하고 있었다.드롭 다운 목록에서 각도 값을 가져옵니다.
을 찾을 수 있습니다 선택된 번호를
selectedNumber : number = 1;
onRowClick(){
console.log(this.selectedNumber)
}
를 얻을 수 onRowClick의 함수 내에서 사용할 수 있습니다 제 생각에는 아마도 더 간단하고 직관적 인 해결책으로 ElementRef을 사용합니다.
@ViewChild('myDropDownList') myDropDownList: ElementRef;
onRowClick(){
const selectedValue = this.myDropDownList.nativeElement.value;
//...
}
제 경우에는 양식을 사용하는 것이 조금 과장되었습니다. 하지만 또 다른 가능한 대안으로 제시해 주셔서 감사합니다.
이 경우 양식 또는 ngModel을 사용하십시오. 사용하여 양식
템플릿
<form [formGroup]="test">
<div class="col-sm-6 form-group">
<label>Industry</label>
<tr (click)="onRowClick(myDropDownList.value)"> Click
<td>
<select #myDropDownList class="form-control select" formControlName="Industry">
<option [selected] = "true == true" [ngValue] = "0"> Please Select</option>
<option *ngFor="let industry of industries" [ngValue]="industry.id">{{industry.name}} </option>
</select>
</td>
</tr>
</div>
</form>
구성 요소
export class AppComponent implements OnInit {
name = 'Angular 5';
test:FormGroup;
industries = [{id:1,name:"rahul"},{id:2,name:"jazz"}];
ngOnInit(){
this.test = new FormGroup({
Industry:new FormControl('')
});
this.test.get('Industry').valueChanges.
subscribe(data =>
console.log(this.industries.filter(d => {return d.id == data}))
);
}
onRowClick(value){
console.log("called");
alert(value);
}
}
는 아래의 0과 같은 HTML 아래로 당신의 하락 변경 TS에서
<select [(ngModel)]="selectedNumber" (ngModelChange)="onRowClick()" >
<option *ngFor="let n of numbers" value={{n}}>{{n}}</option>
</select>