angular2在模型更改后更新视图

在与AngularJS合作了几年后，我刚刚开始使用Angular2

我有一个组件，它显示有关用户的一些信息，并且根据声明的变量，标记将根据

showtuff

变量的值进行调整<代码>填充2是默认设置<代码>填充1应显示重复的数据列表。当用户单击showStuffOne（）时，变量确实会更改为正确的值，但是函数中订阅的数据不会更新到视图中

在这个特定的实例中，当模型发生变化时，我对更新视图的正确“angular2”方法有点困惑。我看过多篇关于DetectionChange、ngZone和behaviorSubject的帖子，但我并不确定什么方向可以解决这个问题。考虑以下事项：

用户页面.html

<ion-row>       
    <ion-col>
        <button ion-button block (click)="showStuffOne()"> Stuff1 </button>
    </ion-col> 

    <ion-col>
        <button ion-button block> Store </button>
    </ion-col>

    <ion-col>
        <button ion-button block (click)="showStuffTwo()"> Stuff2 </button>
    </ion-col>   
</ion-row>


<ion-list *ngIf="showStuff == 'stuff1'" ngFor="let event of eventList" >
    <h3>{{event.title}}</h3>
    <span>{{event.location}}</span>
</ion-list>

<ion-list *ngIf="showStuff == 'stuff2'">stuff2</ion-list>

编辑： 答案可在

---

有两个想法可以尝试：先设置此。事件列表=数据，然后再设置此。showStuff='stuff1'；。。。。您还可以尝试将数据项追加到此.eventList，而不是将变量设置为data。祝你好运另外，你应该使用*ngFor而不是ngFor吗？@rafe尝试了两种建议。同样的错误。我之所以使用ngFor（非星号）是因为我有*ngIf。如果我在showView中添加*NGR，它甚至不会触发。如果你可以在plnkr中复制它，那么调试起来就很容易了。代码看起来很好，请尝试以下操作：

import { Component, NgZone, OnInit, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams, ModalController } from 'ionic-angular';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable} from 'angularfire2/database';

import * as firebase from 'firebase/app';

@Component({
    templateUrl: 'user-page.html',
    selector: 'user-page'
})

export class UserPage {

    userId: string;
    eventList: string[];
    showStuff: string;


    constructor(private cd: ChangeDetectorRef, private zone: NgZone, public navCtrl: NavController, public navParams: NavParams, private afDB: AngularFireDatabase, public modalCtrl: ModalController) {
        console.log(this.navParams.get('username'))
        var getUsr = afDB.list('https://myendpoint.com/users', {
            query: {
                orderByChild: 'uname',
                equalTo: this.navParams.get('username')
            }

        }).subscribe(data => {
            console.log(data)
            this.userId = data[0].uid;

        })

    }


    ngOnInit() {
        this.showStuff = 'stuff2';
    }


    showStuffOne() {
        console.log("stuff1")
        this.userEvents(this.userId);


    }
    showStuffTwo() {
        console.log("stuff2")
        this.showStuff = 'stuff2';

    }

    openEvent = function(key) {
        console.log(key)
        let eventObj = {
            eventKey: key
        }
        let eventModal = this.modalCtrl.create(EventModal, eventObj);
        eventModal.present()
    };

    userEvents(userid: string) {
        var getUsrEvnts = this.afDB.list("http://myendpoint.com/event", {
            query: {
                orderByChild: "created_by",
                equalTo: userid
            }
        }).subscribe(data => {

            this.showStuff = 'stuff1'; // this correctly updates the variable, changing the view
            this.eventList = data; // data not updating, returning undefined, however the data logs here
            console.log(this.eventList)

        })
    }

}