###前提・実現したいこと
Angular2,Onsen UIの環境でサンプルを書いています。アプリの情報は別途storeで管理するという構造です。
Onsen UIのons-navigatorオブジェクトを利用、アプリ起動時にstoreがHttpにて情報を取得、取得したデータをangular2のNgForでループして描画するということを行いたい。
###発生している問題・エラーメッセージ
データ取得が完了してもバインディングされない。
###該当のソースコード
typescript
1// app.ts 2import {Component, OnInit Injectable} from '@angular/core'; 3import {OnsenModule, OnsNavigator} from 'angular2-onsenui'; 4import {DefaultPageComponent} from './component/defaultPage.component'; 5import {AppStore} from './module/store'; 6 7@Component({ 8 selector: 'app', 9 template: '<ons-navigator #appNavigator [page]="page" id="appNavigator"></ons-navigator>' 10}) 11export class MyApp implements OnInit { 12 page: any = DefaultPageComponent; 13 options: {animation: string} = {animation: 'slide'}; 14 15 constructor (private appStore: AppStore) { 16 console.info('app constructor', this.appStore); 17 } 18 19 ngOnInit() { 20 this.appStore.init(); 21 } 22} 23
typescript
1// store.ts 2@Injectable() 3export class AppStore { 4 rootData: rootData[]; 5 constructor(private storage: Storage) { 6 } 7 8 init(): void { 9 console.info('store.init'); 10 this.updateRoot(); 11 } 12 13 updateRoot(): void { 14 console.info('store.updateRoot'); 15 this.storage.getData().subscribe(response => { 16 this.rootData = response; 17 }) 18 } 19}
typescript
1// defaultPage.cmponent.ts 2@Component({ 3 selector: 'ons-page', 4 template: ' 5<ons-toolbar> 6 <div class="center"> 7 sample 8 </div> 9</ons-toolbar> 10<ons-carousel #myCarousel auto-refresh fullscreen swipeable auto-scroll overscrollable initial-index="0"> 11 <ons-carousel-item *ngFor="let item of appStore.rootData" [item]="item"></ons-carousel-item> 12</ons-carousel> 13' 14}) 15export class DefaultPageComponent { 16 constructor () { 17 } 18}
###試したこと
1、defaultPage.component内にて@Outputを使い、イベントを伝搬、それを受け取ってstore.init()を実行する
2、app.tsにてChangeDetectionRefをDIして、store.init()実行後にchangeDetectionRef.markForCheck()を実行する
###補足情報(言語/FW/ツール等のバージョンなど)
package.json内容です。
json
1{ 2 "name": "onsenui-v2-angular2-minimum", 3 "version": "2.1.1+20160920.1", 4 "description": "", 5 "dependencies": { 6 "@angular/common": "^2.0.0", 7 "@angular/compiler": "^2.0.0", 8 "@angular/core": "^2.0.0", 9 "@angular/http": "^2.0.0", 10 "@angular/platform-browser": "^2.0.0", 11 "@angular/platform-browser-dynamic": "^2.0.0", 12 "@angular/platform-server": "^2.0.0", 13 "@angular/router": "^3.0.0", 14 "angular2-onsenui": "^1.0.0-rc.1", 15 "core-js": "^2.4.1", 16 "onsenui": "^2.0.0", 17 "reflect-metadata": "0.1.8", 18 "rxjs": "5.0.0-beta.12", 19 "zone.js": "0.6.23" 20 }, 21 "devDependencies": { 22 "json-loader": "^0.5.4" 23 } 24} 25
MyAppコンポーネントにdefaultPageComponentコンポーネントを渡し、テンプレート内にて[page[="page"で初期ページを表示していますが、MyAppコンポーネントのtemplateに直接defaultPageComponentのtemplate内容を書くと問題なく展開されます。
何回かリロードし直すと展開されるため、単純に読み込みの順番と思うのですが、angular2にはangular1系に会った$applyや$timeoutなどのようなものはないのでしょうか。
あなたの回答
tips
プレビュー