NativeScript One-Way Databinding aktualisiert nicht Ansicht

Question

Dies scheint wie ein ziemlich einfacher Fall für mich, aber ich vermisse offensichtlich etwas. Ich habe ein Model, das an die View gebunden ist. Ich lade das Model dann mit einem Http-Aufruf. Warum wird die Ansicht nicht aktualisiert? Ich dachte, das wäre der springende Punkt der Einwegbindung.

Ich habe überprüft, dass ich die Daten, die ich von dem http-Aufruf erwarte, zurückbekomme.

aktualisieren Ich habe eine Schaltfläche auf dem Bildschirm und Datenbindung wird der Bildschirm mit den http geladenen Daten für beide Felder auf Knopfdruck tatsächlich aktualisieren, auch wenn die Schaltfläche Methode setzt nur einen der Werte. Entweder gibt es einen Fehler in NativeScript oder ich mache etwas nicht richtig.

Update 2 Nur der Akt des Klickens auf die Schaltfläche löst die Bindung aus. Ich habe den Code geändert, um einen leeren Tipphandler zu haben, und wenn ich nur auf den Knopf klicke, wird er gebunden.

Typoskript

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

Ihr Code wird als mit dem Standard-ChangeDetectionStrategy erwartet. Sie haben aber die Strategie geändert OnPush

Um Ihre Bindung Arbeit zu machen, wie in dem Standard erwartet changeStrategy die folgende Zeile

changeDetection: ChangeDetectionStrategy.OnPush 

ändern oder löschen zu

changeDetection: ChangeDetectionStrategy.Default 

Mehr über die Angular-2 ChangeDetectionStrategy here und here

Wenn Sie noch anstelle der Standard-Strategie verwenden OnPush wollen, dann sollten Sie Ihre Eigenschaften als @input deklariert werden() und sobald die Änderung vorgenommen wird (in Ihrem Fall in setData) markiert mit markForCheck()

der Grund, Ihre Bindung funktioniert, wenn sie von Button-Hahn ausgelöst, weil Anwendung Zustandsänderung durch ausgelöst werden kann:

• Events - tippen, Streichen,
• XHR - Abfragen von Daten aus einer Wieder mote server
• Zeitgeber - z.B. (SetTimeout)

Für Testzwecke und wenn jemand interessiert, wie das Szenario zu implementieren mit OnPush hier ist ein Beispielcode:

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."); 
    } 
}