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

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

ただいまの
回答率

90.46%

  • Onsen UI

    362questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • Angular2

    192questions

angular2 onsenui 利用時のデータバインディング

受付中

回答 0

投稿

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

ds_11222277

score 21

前提・実現したいこと

Angular2,Onsen UIの環境でサンプルを書いています。アプリの情報は別途storeで管理するという構造です。
Onsen UIのons-navigatorオブジェクトを利用、アプリ起動時にstoreがHttpにて情報を取得、取得したデータをangular2のNgForでループして描画するということを行いたい。

発生している問題・エラーメッセージ

データ取得が完了してもバインディングされない。

該当のソースコード

// app.ts
import {Component, OnInit Injectable} from '@angular/core';
import {OnsenModule, OnsNavigator} from 'angular2-onsenui';
import {DefaultPageComponent} from './component/defaultPage.component';
import {AppStore} from './module/store';

@Component({
  selector: 'app',
  template: '<ons-navigator #appNavigator [page]="page" id="appNavigator"></ons-navigator>'
})
export class MyApp implements OnInit {
    page: any = DefaultPageComponent;
    options: {animation: string} = {animation: 'slide'};

    constructor (private appStore: AppStore) {
        console.info('app constructor', this.appStore);
    }

    ngOnInit() {
        this.appStore.init();
    }
}
// store.ts
@Injectable()
export class AppStore {
    rootData: rootData[];
    constructor(private storage: Storage) {
    }

    init(): void {
        console.info('store.init');
        this.updateRoot();
    }

    updateRoot(): void {
        console.info('store.updateRoot');
        this.storage.getData().subscribe(response => {
            this.rootData = response;
        })
    }
}
// defaultPage.cmponent.ts
@Component({
  selector: 'ons-page',
  template: '
<ons-toolbar>
    <div class="center">
        sample
    </div>
</ons-toolbar>
<ons-carousel #myCarousel auto-refresh fullscreen swipeable auto-scroll overscrollable initial-index="0">
    <ons-carousel-item *ngFor="let item of appStore.rootData" [item]="item"></ons-carousel-item>
</ons-carousel>
'
})
export class DefaultPageComponent {
    constructor () {
    }
}

試したこと

1、defaultPage.component内にて@Outputを使い、イベントを伝搬、それを受け取ってstore.init()を実行する
2、app.tsにてChangeDetectionRefをDIして、store.init()実行後にchangeDetectionRef.markForCheck()を実行する

補足情報(言語/FW/ツール等のバージョンなど)

package.json内容です。

{
  "name": "onsenui-v2-angular2-minimum",
  "version": "2.1.1+20160920.1",
  "description": "",
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@angular/router": "^3.0.0",
    "angular2-onsenui": "^1.0.0-rc.1",
    "core-js": "^2.4.1",
    "onsenui": "^2.0.0",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.23"
  },
  "devDependencies": {
    "json-loader": "^0.5.4"
  }
}

 
MyAppコンポーネントにdefaultPageComponentコンポーネントを渡し、テンプレート内にて[page[="page"で初期ページを表示していますが、MyAppコンポーネントのtemplateに直接defaultPageComponentのtemplate内容を書くと問題なく展開されます。
何回かリロードし直すと展開されるため、単純に読み込みの順番と思うのですが、angular2にはangular1系に会った$applyや$timeoutなどのようなものはないのでしょうか。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

同じタグがついた質問を見る

  • Onsen UI

    362questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • Angular2

    192questions