Question

这对我来说似乎是一个非常简单的案例，但我显然错过了一些东西。我有一个模型绑定到视图。然后我用Http调用加载模型。为什么View不更新？我认为这是单向约束的全部要点。

我已经确认我正在收到我希望从http电话中获得的数据。

更新我在屏幕上添加了一个按钮，数据绑定实际上会在按钮按下时用两个字段的http加载数据更新屏幕，即使按钮方法只设置其中一个值。所以要么NativeScript中存在错误，要么我做错了。

更新2 只需单击按钮即可触发绑定。我已将代码修改为具有空的点击处理程序，只需单击该按钮即可进行绑定。

打字稿

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。但是，您已将策略更改为 onPush

为了使您的绑定在默认的changeStrategy 删除中符合预期，以下行

changeDetection: ChangeDetectionStrategy.OnPush

或将其更改为

changeDetection: ChangeDetectionStrategy.Default

有关Angular-2 ChangeDetectionStrategy here和here

的更多信息

如果您仍想使用onPush而不是默认策略，那么您的属性应声明为 @input（），并且一旦更改（在您的情况下在setData中）标记为 markForCheck()

从按钮点击触发绑定工作的原因是因为应用程序状态更改可以通过以下方式触发：

活动 - 点击，滑动，

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

NativeScript单向数据绑定不会更新视图

1 个答案: