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

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

ただいまの
回答率

89.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,851

rinimaruranran

score 32

 前提・実現したいこと

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

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

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

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

 該当のソースコード

■■■ @index.html ■■■
:(省略)
<body>
        <app-root>Loading...</app-root>
    </body>
</html>


■■■ @app.component.html ■■■
<div class="main">
  <div class="title">
    <h1>{{title}}</h1>
  </div>
  <my-dashboard></my-dashboard>
</div>



■■■ @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>

■■■ @app.module.ts ■■■
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule,JsonpModule} from '@angular/http';
import { DashboardComponent } from './component/dashboard/dashboard.component';
import { AppComponent } from './app.component';
import {DataService} from './services/data.service';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    FormsModule
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }



■■■ @app.component.ts ■■■
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hoge Information Searcher';
  hogeId = "";
}



■■■ @dashboard.component.ts ■■■
import {Component, OnInit} from "@angular/core";
import {Data} from "../../data";
import {DataService} from "../../services/data.service";

@Component({
    selector: 'my-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit{

    hogeId = '検索結果';
    hogeTitle = '検索結果';

    constructor(private dataService: DataService){}

    dataList : Data[];

    ngOnInit(): void {
        this.dataService.data().subscribe(
            result => this.setDatas(result),
            error => alert('通信エラー' + error)
        );
    }

    setDatas(result): void {
        if(result.error) {
            alert('Web APIエラー' + result.message);
        }

        this.hogeId = result.data.hogeId;
        this.hogeTitle = result.data.hogeTitle;
    }
}



■■■ @data.service.ts ■■■
import { Injectable }    from '@angular/core';
import { Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http';
import {Observable} from  "rxjs/Observable";
import "rxjs/add/operator/map";

import { Data } from '../data';

@Injectable()
export class DataService {

  private datasUrl = 'http://localhost:8080/sampleData/data';

  constructor(private http: Http, private jsonp: Jsonp) { }

  data(): Observable<Data> {
    let option : RequestOptions;
    option = this.setHttpGetParam(this.datasUrl);

    return this.http.post(this.datasUrl, "", option)
      .map((response) => {
        let content;
        let obj = response.json();
        content = {
          error: null,
          data: obj
        };
        console.log(response);
        return content;

      });

  }
  private setHttpGetParam(url: string): RequestOptions {
    let param = new URLSearchParams();
    ■■■■■■■■ 結果をここで使いたい ■■■■■■■■
    param.set("hogeId", #hogeId); (←エラー文の36行目はここです)
    param.set("countryCd", "1");
    let options: RequestOptionsArgs = {
      method: "post",
      url: url,
      search: param,
    };
    return new RequestOptions(options);
  }

}

 エラー内容

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mrkmyki

    2018/11/19 22:24

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

    キャンセル

  • xenbeat

    2018/11/19 23:13

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

    キャンセル

  • rinimaruranran

    2018/11/20 09:38

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

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/20 17:19 編集

    ご回答ありごとうございます!

    自分なりに解釈して下記のように変更を加えました。
    ところが、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側へデータを渡す記述がうまくいっていないような気がしているのですが、文法的な間違いでしょうか。
    ご教示いただけると幸いです。

    キャンセル

  • 2018/11/20 19:58

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

    キャンセル

  • 2018/11/21 11:18

    申し訳ございません。inputIdの初期値をnullにしている状態でngOnInit()以下の全ての処理が走ってしまっていました。

    ngOnInit()ではなく、フォームの送信ボタンを作成し、ボタンをクリックするとngOnInit()以下に書かれていた処理が走るように記述すると、正しく入力値が反映されました。

    ご丁寧にありがとうございました!参考にさせていただいて解決まで辿り着けました!

    キャンセル

  • 2018/11/21 12:20

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

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる