質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3378閲覧

【Angular】テーブル内に作成したプルダウンで選択された値を取得したい

yamame01

総合スコア16

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/27 09:05

編集2018/08/28 03:15

前提・実現したいこと

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

解決方法わかる方いらっしゃいましたら、ご教授ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まず、selectedSexを配列にして、ngModelのバインド先をselectedSex[t]に変えてみてください。
これで要件は満たせるかと思います。

private selectedSex = [];
<select [(ngModel)]="selectedSex[t]"> <option [value]='undefined'> 選択してください </option> <option *ngFor="let sex of row.sex;" [value]="sex.id"> {{ sex.name }} </option> </select>

投稿2018/08/29 00:10

keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamame01

2018/08/29 01:31

ありがとうございます!! 思った通りにバインドされ、値が取得することができました! 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問