查看不更新 Ionic 2 和 Angular 2 中的变量更改

Question

我刚开始使用 Angular 2，所以我可能只是不明白哪里出了问题。但是，我有一个 *ngIf，它应该在变量为假时显示按钮，而在变量为真时不显示按钮。

但是，一旦我将变量更新为 true，按钮就不会消失。任何帮助是极大的赞赏。

代码：

HTML

ion-slide>
<h1> Uber Button </h1>
<button ion-button color="dark" *ngIf="!uberSettings?.uberActivated" (click)="userSettings.connectUber()">Activate Uber</button>
</ion-slide>

组件：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { UserSettings} from '../../providers/user-settings'


@Component({
 selector: 'page-setup',
 templateUrl: 'set-up.html'
})

export class SetUpPage {

  constructor(public navCtrl: NavController, private userSettings: UserSettings) {

 }

  goToHome(){
   this.navCtrl.setRoot(HomePage);
 }



}

服务：

declare
var window: any;


@Injectable()
export class UserSettings {

authorizationCode: string;
uberData: any;

uberSettings: UberSettings;
result: any;




constructor(public http: Http, private platform: Platform, public storage: Storage) {

    console.log('called uberSettings Constructor');

    storage.ready().then(() => {

        storage.get('uberSettings').then((val) => {

                console.log('the val is' + val);
                if (val == null) {
                    console.log('val equaled null');
                    this.uberSettings = {
                        buttonOn: false,
                        uberActivated: false,
                        token: null,
                        refreshToken: null,
                        long: null,
                        lat: null,
                    }

                    console.log(this.uberSettings);

                    storage.set('uberSettings', this.uberSettings);

                    // this.uberSettings.uberActivated = true; 
                    // // this.uberSettings.token= val.token;
                } else {
                    console.log("there was a value for Val");
                    this.uberSettings = val
                    console.log(this.uberSettings);
                }
            })

            .catch(err => {
                console.log('we dont have an uber token yet' + JSON.stringify(err));
            });


    });




}

public connectUber() {
    this.platform.ready().then(() => {
        this.uberLogin().then(success => {
            this.authorizationCode = success;
            console.log(this.authorizationCode);
            this.token()

        }, (error) => {
            alert(error);
        });
    });
}


token() {

    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    // let body = 'client_id=3ibytPcye4w3_-0txknyO7ptD-MfFMkn&client_secret=2Kp8O54mGvlOoBm6IPX_0gKBmJ_mODSo7FqPbbA9&redirect_uri=http://localhost:8100/callback&grant_type=authorization_code&code=' + this.authorizationCode

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('client_id', <CLIENT ID>);
    urlSearchParams.append('client_secret', <CLIENT SECRET>);
    urlSearchParams.append('redirect_uri', 'http://localhost:8100/callback');
    urlSearchParams.append('grant_type', 'authorization_code');
    urlSearchParams.append('code', this.authorizationCode);
    let body = urlSearchParams.toString()


    return this.http.post(`https://login.uber.com/oauth/v2/token`, body, {
            headers: headers
        })
        .map(response => response.json())
        .subscribe(result => {

            this.result = result
            console.log(this.result);
            this.uberSettings.token = this.result.access_token;
            this.uberSettings.refreshToken = this.result.refresh_token;
            this.uberSettings.uberActivated = true;
            this.uberSettings.buttonOn = true;
            console.log(this.uberSettings);

        });

    public uberLogin(): Promise < any > {
        return new Promise(function(resolve, reject) {
            var browserRef = window.cordova.InAppBrowser.open("https://login.uber.com/oauth/v2/authorize?client_id=3ibytPcye4w3_-0txknyO7ptD-MfFMkn&response_type=code", "_blank", "location=no,clearsessioncache=yes,clearcache=yes");
            browserRef.addEventListener("loadstart", (event) => {
                if ((event.url).indexOf("http://localhost:8100/callback") === 0) {
                    browserRef.removeEventListener("exit", (event) => {});
                    browserRef.close();

                    var responseParameters = ((event.url).split("code="));

                    var parsedResponse = responseParameters[1].split("#");

                    if (parsedResponse[0] !== undefined && parsedResponse[0] !== null) {
                        resolve(parsedResponse[0]);
                    } else {
                        reject("Problem authenticating with Uber");

                    }

                }
            });
            browserRef.addEventListener("exit", function(event) {
                reject("The Uber sign in flow was canceled");
            });
        });
    }

}

因此，如果您查看我正在更新 this.uberSettings 的服务代码，当调用 token() 并且控制台显示 this.uberSettings.uberActivated 已更改为 true 时。但是，我不明白为什么按钮仍然显示。任何帮助将不胜感激。谢谢！

Answer 1

您的 ngIf 没有引用您的服务。我认为你打错了:)

*ngIf="!userSettings.uberSettings?.uberActivated"

而不是

*ngIf="!uberSettings?.uberActivated"

查看不更新 Ionic 2 和 Angular 2 中的变量更改

View not updating on variable change in Ionic 2 and Angular 2

javascript

model-view-controller

ionic2

ionic2-providers

angular