LoginSignup
1
2

More than 5 years have passed since last update.

Angular2系以上で、$scope.apply()っぽいことしたい

Last updated at Posted at 2017-08-14

APIでデータ取ってきた後にデータバインドで画面を反映させたかったんだけど、うまく動きませんでした。
Angular1系だったら$scope.apply()で強引にやってたんだけど、それを2系以上でやるのってどうやるんやろか。

と思って見たら、ChangeDetectorRefというものがある模様。
組み込んでみたら、ちゃんと動きました。やったね!

動けばいいので、しくみとかはよくわかってないです。
たぶん変更を検知してDOMを更新してくれてるんだと思います。

search.ts
 // ChangeDetectorRefをインポートするらしい
 import { Component, ChangeDetectorRef } from '@angular/core';

 @Component({
   selector: 'page-search',
   templateUrl: 'search.html'
 })
 export class SearchPage {
   ...
   constructor(public navCtrl: NavController, private chRef: ChangeDetectorRef) {
     ...
   }
   // 検索を行う
   search(searchWords) {
     searchAPI.getResult(searchWords).then(
       (data) => {
        this.results = data;
         // 変更検知して、DOMを更新してくれてるんだと思う
         this.chRef.detectChanges();
       }
     );
   }
 }

LifeCycleというものもあるそうです。
これはAngular2系なのかな。

参考
https://stackoverflow.com/questions/33174146/angular-2-0-equivalent-to-scope-apply

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2