

angular2 ons-navigator ons-
carouselを使ったページを作成していますが、以下の構成で実行すると`*ngFor`が展開されません。

**app.ts**

[code]

    @Component({
        selector: 'app',
        template: '<ons-navigator #myNavigator [page]="page"></ons-navigator>
    })
    export class MyApp implements OnInit {
        page = defaultPageComponent;
        constructor(private storeService: StoreService) {}
        ngOnInit() {
            this.storeService.init(); // Httpによるデータ取得　store初期化
        }
    }
    
[/code]

**defaultPageComponent.ts**

[code]

    @Component({
        selector: 'ons-page',
        template: `
            <ons-carousel>
                <ons-carousel-item *ngFor="let item of storeService.data">
                    <div>{{item}}</div>
                </ons-carousel-item>
            </ons-carousel>
        `
    })
    export class DefaultPageComponent {
        constructor(private storeService: StoreService) {}
    }
    
[/code]

デベロッパーツールで確認したところ、ngForの箇所でtemplate bindings =
{}となっており、storeService初期化後のデータでレンダリングしてなさそうな感じです。storeService初期化のタイミングなんでしょうか。storeServiceの値が変わったタイミングでデータバインディングされない？  
でも、この状態でブラウザをリロードするとngForが展開され、ons-carousel-
itemが表示されます。デベロッパーツールで確認すると、template bindings=[Object object,Object
object....]となっており、storeService初期化後のデータでデータバインディングできているようです。  
初回からしっかり表示させる方法を教えていただければと思います。

試したことですが、app.ts内の

[code]

    template: '<ons-navigator></ons-navigator>'
    
[/code]

この中に直接defaultPageComponentのtemplate内容を書くと正常にデータバインディングができます。  
この状態で作成しようと、ons-
navigator初期ページはそのままapp.tsのtemplate内に書き、navigator.pushpage()によるページ遷移はons-
templateを使い、id属性でページを指定する方法で進めたのですが、今度はons-
navigator要素を取得後、pushPageで他のページを表示した時にコンソールに「そんなfactoryはありません。」とエラー、navigator.pushPage()で遷移するページだけコンポーネントにして、渡すそうとすると、angular2
onsenuiでは、ons-pageをコンポーネントのselectorに指定しなければならないようで、今度はapp.ts内に描かれているons-
pageがうまく表示されません。

このons-navigator ons-carousel の構成でうまい方法はありませんか。

本当はdefaultPageComponentにMyAppから値を渡してデータバインディングがしたいのすが、onsen-ui
angular2リファレンスの上記方法だと、defaultPageComponentへの値の渡し方がわかりません。@Inputも試しましたが、値が渡せません。  
この値の渡し方も教えていただければと思います。


CC BY-SA 4.0
2016-10-16T19:29:10.980
29615
2019-08-21T17:00:43.360
2019-08-21T17:00:43.360
3060
19105
question
onsen-ui angular2
angular2 ons-navigator


自己解決しました。

原因は@NgModuleのentryComponents内で指定したコンポーネントであることが原因だったようです。  
トップのons-
navigatorコンポーネント初期化時に@ViewCild()で取得したnavigatorオブジェクトにてthis.navigator.nativeElement.pushPage(page)をngAfterViewInit内で呼ぶことでデータバインディングが正常にできました。

尚、その際に、ChangeDetectorRefをDIして、changeDetectorRef.detectChanges()を呼ぶことで変更を許可するという記述を加えたところ問題なく動作しました。

相変わらず、初期化時に指定したページに@Inputで値を渡す方法はわかりませんが。

* * *

この回答は [@dismo
さんのコメント](https://ja.stackoverflow.com/questions/29615/angular2-ons-
navigator#comment28860_29615) を元にコミュニティwikiとして投稿しました。


CC BY-SA 4.0
2019-08-21T09:12:37.680
57518
2019-08-21T09:12:37.680
3060
29615
answer