前提・実現したいこと
Angularを使って画面を作っています。
テーブル内にプルダウンを表示し、選択された値をComponentで受け取りたいのですが、うまくいきません。
下記にコードを記載しますので、ご助力いただけますでしょうか。
該当のソースコード
templete.html
html
1 2<button (click)="btnClicked()">OK</button> 3 4<ngx-datatable 5 #dataTable 6 class="bootstrap" 7 [rows]="_rows" 8 [columns]="_columns" 9> 10 11<ng-template #sexT let-row="row" let-value="value" let-t="index"> 12 <select> 13 <option [value]='undefined'> 14 選択してください 15 </option> 16 <option *ngFor="let sex of row.sex;" [value]="sex.id"> 17 {{ sex.name }} 18 </option> 19 </select> 20</ng-template> 21</ngx-datatable>
component.ts
typescript
1private _columns = []; 2private _rows= []; 3private selectedSex: Object; 4 5ngOnInit() { 6 this._columns = [ 7 { prop: 'name', name: '名前'}, 8 { prop: 'sex', name: '性別', cellTemplate: this.sexT} 9 ]; 10 11 this._rows = [ 12 { 13 name: "テスト太郎", 14 sex :[ 15 { id:0, name:"男" }, 16 { id:1, name:"女" } 17 ] 18 }, 19 { 20 name: "テスト次郎", 21 sex :[ 22 { id:0, name:"男" }, 23 { id:1, name:"女" } 24 ] 25 } 26 ]; 27} 28 29btnClicked() { 30 console.log("sex:") //ここに選択された値を表示したい 31}
試したこと
ngModelを使ってバインドした場合、どちらか片方の値を変更するともう一方も変更されてしまいます。
template.html
html
1<!--変更点のみ記載 --> 2 <select [(ngModel)]="selectedSex"> <!-- [(ngModel)]="selectedSex" を追加 --> 3 <option [value]='undefined'> 4 選択してください 5 </option> 6 <option *ngFor="let sex of row.sex;" [value]="sex.id"> 7 {{ sex.name }} 8 </option> 9 </select>
component.ts
typescript
1// 変更点のみ記載 2btnClicked() { 3 console.log("sex:" + this.selectedSex) // ほしい値は取れているが、「テスト太郎」も「テスト次郎」も変わってしまう 4}
補足情報(FW/ツールのバージョンなど)
Angular: 5.1.2
解決方法わかる方いらっしゃいましたら、ご教授ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/29 01:31