前提・実現したいこと
Angularを勉強し始めて1週間ほどの者です。TypeScriptも同時期に始めたため、初歩的な質問でしたら申し訳ございません。
DBからデータを拾ってきて、集計などができる簡単なWebページを作成しています。
バインディングを使って、DBの内容をHTML上に表示させるところまで完了しております。
しかし、次に入力フォームを使って、入力されたデータをTypeScript内(現在は検索したいものを手打ちで入力しています)に反映させたいです。
そこで、[(ngModel)]を使ってフォーム開発を行なっているのですが、起動前にエラーが出てしまう状態です。
自分なりに調べてはいるのですが、煮詰めてしまっているのでアドバイス頂けると幸いです。
よろしくお願いいたします。
該当のソースコード
<div class="search"> <div class="search_engine"> ■■■■■■■■ ここで入力して ■■■■■■■■ <form> <input id="hogeId" name="hogeId" type="text" [(ngModel)]="hogeId" #hogeId="ngModel" /> </form>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></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>
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
回答1件
あなたの回答
tips
プレビュー