NativeScriptの一方向データバインディングではビューが更新されません

Question

これはかなり単純なケースですが、明らかに欠落しています。ビューにバインドされるモデルがあります。次に、HTTP呼び出しを使用してモデルをロードします。 Viewが更新されないのはなぜですか？私はそれが一方通行の全体的なポイントだと思った。

私は、http呼び出しから期待しているデータを取得していることを確認しました。

更新 は、私が実際にボタン方式のみのいずれかの値を設定していても、ボタンプッシュの両方のフィールドのためのHTTPロードされたデータで画面を更新する画面とデータバインディングにボタンを追加しました。ですから、NativeScriptにバグがあるか、私は間違って何かしていません。

更新2ボタンをクリックするだけでバインディングが実行されます。空のタップハンドラを持つようにコードを修正しました。ボタンをクリックするだけでバインドされます。

typescriptです

import { Component, ChangeDetectionStrategy, OnInit } from "@angular/core"; 
import { Job } from "../../shared/customer/job"; 
import { Http, Headers, Response } from "@angular/http"; 
import { Observable } from "rxjs/Rx"; 

@Component({ 
    selector: "my-app", 
    templateUrl: "pages/job-details/job-details.html", 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 

export class JobDetailsComponent implements OnInit { 
    job: Job; 
    salesAssociateName: string = "x"; 

    constructor(private http: Http) { 
     this.job = new Job(); 
    } 

    ngOnInit() { 
     this.getJob(1234); 
    } 

    getJob(leadId: number) { 
     var url = "https://url-not-for-you/job?franchiseeid=48&leadid=" + leadId; 
     var headers = this.createRequestHeader(); 

     this.http.get(url, { headers: headers }).map(response => response.json()) 
      .do(data => this.setData(data[0])) 
      .subscribe(
       () => this.success(), 
       (error) => this.error() 
      ); 
    } 

    private createRequestHeader() { 
     let headers = new Headers(); 
     headers.append("AuthKey","blah"); 
     headers.append("AuthToken", "blee"); 

     return headers; 
    } 

    setData(job) { 
     this.job.FullName = job["FullName"]; 
     this.job.SalesAssociateName = job["SalesAssociateName"]; 
     this.salesAssociateName = this.job.SalesAssociateName; 

     console.log("Found job for customer: " + job["FullName"]); 
    } 

    success() { 
     // nothing useful 
    } 

    error() { 
     alert("There was a problem retrieving your customer job."); 
    } 

    changeSA() { 
    } 
} 

HTML

<StackLayout> 
    <Label [text]="job.FullName"></Label> 
    <Label [text]="salesAssociateName"></Label> 
    <Button text="Push" (tap)="changeSA()"></Button> 
</StackLayout> 

Answer 1

デフォルトChangeDetectionStrategyで期待どおりのコードは動作します。次の行

changeDetection: ChangeDetectionStrategy.OnPush 

を削除したり、

changeDetection: ChangeDetectionStrategy.Default 

に変更しchangeStrategy デフォルトで期待どおりしかし、あなたはあなたの結合作業を行うためにonPush

に戦略を変更しました

Angular-2 ChangeDetectionStrategyの詳細hereとhere

あなたはまだあなたの特性は、@input（）として宣言されなければならないと変更が（のsetDataで、あなたのケースで）行われた後markForCheck()

が付いて、代わりにデフォルトの戦略のonPush使用したい場合は- タップ、スワイプ、

XHR - リからのデータのフェッチ

• イベント： アプリケーションの状態の変化がでトリガすることができますので、ボタンのタップからトリガされたとき、あなたが働いているバインディング理由がありますモートサーバー
• タイマー - setTimeout（）テストのため

と誰かがここにonPushでシナリオを実装する方法の興味を持っている場合は、サンプルコードです：

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, NgZone, Input } from "@angular/core"; 
import { Http, Headers, Response } from "@angular/http"; 
import { Observable as RxObservable } from "rxjs/Rx"; 
import "rxjs/add/operator/map"; 
import "rxjs/add/operator/do"; 

@Component({ 
    selector: "my-app", 
    templateUrl: "app.component.html", 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class AppComponent implements OnInit { 
    @Input() public job: any = { salesAssociateName: "default job" }; 
    @Input() public salesAssociateName: string = "default name"; 


    constructor(private http: Http, private change:ChangeDetectorRef) { } 

    ngOnInit() { 
     this.getJob(); 
    } 

    getJob() { 
     var url = "http://httpbin.org/get"; 
     var headers = this.createRequestHeader(); 

     this.http.get(url, { headers: headers }) 
      .map(response => response.json()) 
      .do(data => { 
       this.setData(); 
      }).subscribe(
       () => this.success(), 
       (error) => this.error() 
      ); 
    } 

    private createRequestHeader() { 
     let headers = new Headers(); 
     return headers; 
    } 

    setData() { 

     this.job.salesAssociateName = "NEW job SalesAssociateName"; 
     this.salesAssociateName = "NEW job FullName"; 
     this.change.markForCheck(); 
    } 

    success() { 
     alert("success"); 
    } 

    error() { 
     alert("There was a problem retrieving your customer job."); 
    } 
}