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

Question

我是使用 Angular 2 的新手，所以我可能只是不明白出了什么问题。但是，我有一个 *ngIf 如果变量为 false，它应该显示一个按钮，如果变量为 true，则不显示按钮。

但是，一旦我将变量更新为 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");
            });
        });
    }
}

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

Answer 1

您的 ngIf 未引用您的服务。我认为你有一个错别字:)

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

而不是

*ngIf="!uberSettings?.uberActivated"