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

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

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

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

Q&A

解決済

2回答

6224閲覧

Angular6での定期処理について

Mmz

総合スコア11

Angular

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

0グッド

0クリップ

投稿2018/07/31 17:12

編集2018/07/31 17:14

今までfirebaseを使ってリアルタイムで更新されたデータが表示されるようにしていたのですが、firebaseをやめて自作APIから取得するようにしようと考えています。
しかしそうなると毎回ブラウザのリロードを行わないと更新されたデータが表示されないです。
そこで定期的にAPIからデータを取得するメソッドを呼び出そうと思うのですが、定期的な処理を行う際に役立つAngularの機能やメソッドなどはあるのでしょうか?

ngOnInit() { setInterval(this.getComments, 1000); }

とりあえず上記のようにsetInterval()を利用して定期的に呼び出す方法を思いついたのでやってみたのですが、以下のエラーが表示されてしまい全くデータが入ってこない状況です。

core.js:1542 ERROR TypeError: Cannot read property 'get' of undefined at push../src/app/timeline/chat/chat.component.ts.ChatComponent.getComments (chat.component.ts:83) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3662) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

エラーが出る原因となっているコードは恐らく以下だと思われるのですがなぜうまくいってないのか分からないです、、
ちなみにconsole.log()でthis.commentsServiceを出力してみるとundefinedが表示されました。
setIntervalをやめてthis.getComments()とすると一回だけ動作し、データも問題なく表示されます。

getComments() { this.commentsService.get().subscribe(responses => { }); }
get(): Observable<any> { return this.http.get<Comment[]>(API_SERVER + 'comments'); }

上記問題の解決、もしくは別の定期処理を行う方法があればご教示頂けないでしょうか。よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

1度getというメソッド名を変えてみてください。
setTimeoutでもObservable.intervalでも大丈夫なはずです。
もしかしたらゲッターの何がしかもしれません。

追記
setTimeoutのコールバックをアロー関数に書き直してください。
thisの参照先が変わってるからだと思われます。
今のコードだとgetComments内のthisがwindowオブジェクトになってるはずです。

投稿2018/08/01 11:51

編集2018/08/01 11:56
keisukeh

総合スコア657

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

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

Mmz

2018/08/01 17:49

>setTimeoutのコールバックをアロー関数に書き直してください。 こちら大変参考になりました!下記の回答者さんのリンク先でもアロー関数の書き方があったので真似したことによって無事にデータが取得できました。 アロー関数がどんなものか理解できてないので引き続き勉強します、ありがとうございました!
guest

0

ベストアンサー

処理を待ち合わせするほうのsetTimeoutでいけそうな気もするのですが…自信がないです。この場合Observableは取れてるんですかね?
Rxのintervalなら素直に書けそうです。
call-a-function-every-10-seconds-angular2

投稿2018/07/31 23:44

編集2018/07/31 23:50
fa11enprince

総合スコア45

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

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

Mmz

2018/08/01 17:46

回答遅くなりましたm(_ _)m こちらですがリンク先の質問者と同じような書き方に変えることで無事に参照できました!!これがアロー関数というものなのでしょうか。。? 結構つまっていたのでなんとか次に進めそうでホッとしています。。本当にありがとうございました!
fa11enprince

2018/08/02 02:09 編集

あー、ほかの方の回答をみてなんとなく真の原因がわかりました。`() => {}`の形式のものはその形から矢印っぽいのでアロー関数と呼ばれてES2015以降のJavaScriptとTypeScriptで導入されています。普通の`function() {}`との違いは`this`の束縛の違いがあります。JavaScriptでthis問題があるのでよく`var self = this;`という書き方があって、それをやる必要がないので便利です。一方TypeScriptとかではプロパティ(フィールド/クラスのメンバ)のthisがアローでない関数内(function)ではthisで参照できないのでここでも`const self = this;`という対応を書くことがあります。この辺はいろいろネットに書いてますので`var self = this;`とかでググってみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問