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

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

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

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

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

Q&A

解決済

1回答

6110閲覧

【Angular】フォームに入力した内容をtypescriptに反映させたいです

rinimaruranran

総合スコア36

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

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

0グッド

0クリップ

投稿2018/11/19 11:24

編集2018/11/20 00:36

前提・実現したいこと

Angularを勉強し始めて1週間ほどの者です。TypeScriptも同時期に始めたため、初歩的な質問でしたら申し訳ございません。

DBからデータを拾ってきて、集計などができる簡単なWebページを作成しています。
バインディングを使って、DBの内容をHTML上に表示させるところまで完了しております。
しかし、次に入力フォームを使って、入力されたデータをTypeScript内(現在は検索したいものを手打ちで入力しています)に反映させたいです。

そこで、[(ngModel)]を使ってフォーム開発を行なっているのですが、起動前にエラーが出てしまう状態です。
自分なりに調べてはいるのですが、煮詰めてしまっているのでアドバイス頂けると幸いです。

よろしくお願いいたします。

該当のソースコード

HTML

1■■■ @index.html ■■■ 2:(省略) 3<body> 4 <app-root>Loading...</app-root> 5 </body> 6</html> 7 8 9■■■ @app.component.html ■■■ 10<div class="main"> 11 <div class="title"> 12 <h1>{{title}}</h1> 13 </div> 14 <my-dashboard></my-dashboard> 15</div> 16 17 18 19■■■ @dashboard.component.html ■■■
<div class="search"> <div class="search_engine"> ■■■■■■■■ ここで入力して ■■■■■■■■ <form> <input id="hogeId" name="hogeId" type="text" [(ngModel)]="hogeId" #hogeId="ngModel" /> </form>
</div> <div class="search_submit"> 送信 </div> </div> <div class="search_result"> <div class="search_result_title"> <h3>検索結果</h3> </div> </div> <ul class="search_result_list"> <li>{{hogeId}}</li> <li>{{hogeTitle}}</li> </ul>
</div>

TypeScript

1■■■ @app.module.ts ■■■ 2import { BrowserModule } from '@angular/platform-browser'; 3import { NgModule } from '@angular/core'; 4import { FormsModule } from '@angular/forms'; 5import { HttpModule,JsonpModule} from '@angular/http'; 6import { DashboardComponent } from './component/dashboard/dashboard.component'; 7import { AppComponent } from './app.component'; 8import {DataService} from './services/data.service'; 9 10@NgModule({ 11 declarations: [ 12 AppComponent, 13 DashboardComponent 14 ], 15 imports: [ 16 BrowserModule, 17 HttpModule, 18 JsonpModule, 19 FormsModule 20 ], 21 providers: [ 22 DataService 23 ], 24 bootstrap: [AppComponent] 25}) 26export class AppModule { } 27 28 29 30■■■ @app.component.ts ■■■ 31import { Component } from '@angular/core'; 32 33@Component({ 34 selector: 'app-root', 35 templateUrl: './app.component.html', 36 styleUrls: ['./app.component.css'] 37}) 38export class AppComponent { 39 title = 'Hoge Information Searcher'; 40 hogeId = ""; 41} 42 43 44 45■■■ @dashboard.component.ts ■■■ 46import {Component, OnInit} from "@angular/core"; 47import {Data} from "../../data"; 48import {DataService} from "../../services/data.service"; 49 50@Component({ 51 selector: 'my-dashboard', 52 templateUrl: './dashboard.component.html', 53 styleUrls: ['./dashboard.component.css'] 54}) 55 56export class DashboardComponent implements OnInit{ 57 58 hogeId = '検索結果'; 59 hogeTitle = '検索結果'; 60 61 constructor(private dataService: DataService){} 62 63 dataList : Data[]; 64 65 ngOnInit(): void { 66 this.dataService.data().subscribe( 67 result => this.setDatas(result), 68 error => alert('通信エラー' + error) 69 ); 70 } 71 72 setDatas(result): void { 73 if(result.error) { 74 alert('Web APIエラー' + result.message); 75 } 76 77 this.hogeId = result.data.hogeId; 78 this.hogeTitle = result.data.hogeTitle; 79 } 80} 81 82 83 84■■■ @data.service.ts ■■■ 85import { Injectable } from '@angular/core'; 86import { Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http'; 87import {Observable} from "rxjs/Observable"; 88import "rxjs/add/operator/map"; 89 90import { Data } from '../data'; 91 92@Injectable() 93export class DataService { 94 95 private datasUrl = 'http://localhost:8080/sampleData/data'; 96 97 constructor(private http: Http, private jsonp: Jsonp) { } 98 99 data(): Observable<Data> { 100 let option : RequestOptions; 101 option = this.setHttpGetParam(this.datasUrl); 102 103 return this.http.post(this.datasUrl, "", option) 104 .map((response) => { 105 let content; 106 let obj = response.json(); 107 content = { 108 error: null, 109 data: obj 110 }; 111 console.log(response); 112 return content; 113 114 }); 115 116 } 117 private setHttpGetParam(url: string): RequestOptions { 118 let param = new URLSearchParams(); 119 ■■■■■■■■ 結果をここで使いたい ■■■■■■■■ 120 param.set("hogeId", #hogeId); (←エラー文の36行目はここです) 121 param.set("countryCd", "1"); 122 let options: RequestOptionsArgs = { 123 method: "post", 124 url: url, 125 search: param, 126 }; 127 return new RequestOptions(options); 128 } 129 130}

エラー内容

ERROR in /Users/rinimaruranran/sample/src/main/resources/static/angular/src/app/services/data.service.ts (36,26): Invalid character. ERROR in /Users/rinimaruranran/sample/src/main/resources/static/angular/src/app/services/data.service.ts (36,27): Cannot find name 'hogeId'.

補足情報(FW/ツールのバージョンなど)

macOS
Angular
TypeScript

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

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

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

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

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

mrkmyki

2018/11/19 13:24

エラーの内容を書いた方が良いかと思います。
xenbeat

2018/11/19 14:13

component等の関連するソースコードも省略せずに記載しましょう
rinimaruranran

2018/11/20 00:38

ターミナルのエラー内容とその他のファイルの内容も追記致しました。よろしくお願い致します。
guest

回答1

0

ベストアンサー

こんにちは。

エラーの原因はDashboardComponent内もしくはsetHttpGetParamメソッド内にhogeIdという変数が不在だからです。(DashboardComponent内に宣言した場合はメソッド内使用時にthis.の修飾子が必要になります)♯は不要です。残すと修正後も構文エラーになるかも知れません。

dashboard.component.htmlで入力したhogeIdはangularの仕組みでdashboard.component.tsのhogeIdに反映されます(双方向バインド)。これをsetHttpGetParamメソッドに渡す仕組みを書いてあげれば良いのではないでしょうか。

<追記>
コメントに対して追記いたします。
DashboardComponent の中にxxxTitle という変数は宣言されていますか?
不在であればエラーになります。宣言していない変数に書き込み、読み込みをした場合エラーとなることはご理解頂けていますでしょうか。不明点が多いようであれば、angularやtypescriptの参考書などで構文について押さえておいた方が良いかと思います。

投稿2018/11/20 06:55

編集2018/11/20 10:55
BlueMoon

総合スコア1339

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

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

rinimaruranran

2018/11/20 10:57 編集

ご回答ありごとうございます! 自分なりに解釈して下記のように変更を加えました。 ところが、xxxTitleが見つからないというエラーが出ます。 EXCEPTION: Cannot read property 'xxxTitle' of null =================================== ■■■ @dashboard.component.html ■■■ :(略) <form> <input id="inputId" name="inputId" type="text" [(ngModel)]="inputId" /> </form> :(略) ■■■ @dashboard.component.ts ■■■ :(略) export class DashboardComponent implements OnInit{ xxxTitle = '検索結果'; inputId = " "; :(略) ngOnInit(): void { this.dataService.data(this.inputId).subscribe( dataResult => this.setDatas(dataResult), error => alert('通信エラー' + error) ); :(略) setDatas(dataResult): void { :(略) this.xxxTitle = dataResult.data.xxxTitle; } } ■■■ @data.service.ts ■■■ :(略) data(inputId): Observable<Data> { let option : RequestOptions; option = this.setHttpGetParam(this.datasUrl, inputId); :(略) } private setHttpGetParam(url: string, inputId: string): RequestOptions { let param = new URLSearchParams(); param.set("hogeId", inputId); :(略) =================================== この状態でフォームに数値を入力し、クロームのデベロッパーツールのコンソールに「inputId」を入力すると、<input ~~略~~ ng-reflect-model="入力した数値">が表示されています。 dashboard.component.ts内でdata.service.ts側へデータを渡す記述がうまくいっていないような気がしているのですが、文法的な間違いでしょうか。 ご教示いただけると幸いです。
rinimaruranran

2018/11/20 10:58

申し訳ございません。記載が漏れておりましたが、DashobardComponent下に記載しております。
rinimaruranran

2018/11/21 02:18

申し訳ございません。inputIdの初期値をnullにしている状態でngOnInit()以下の全ての処理が走ってしまっていました。 ngOnInit()ではなく、フォームの送信ボタンを作成し、ボタンをクリックするとngOnInit()以下に書かれていた処理が走るように記述すると、正しく入力値が反映されました。 ご丁寧にありがとうございました!参考にさせていただいて解決まで辿り着けました!
BlueMoon

2018/11/21 03:20

解決されて何よりです。お疲れ様でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問