我正在使用带有Firebase后端的Ionic制作社交媒体应用程序,我使用Angularfire2进行通信。
我的应用中有一个页面,它通过从NavParams接收一个uid来列出用户的所有关注者,并将其发送给一个提供者,该提供者返回一个FirebaseListObservable和该用户的关注者。
追随者-page.ts
constructor(public navCtrl: NavController, public navParams: NavParams, public util: UtilProvider, public userProvider: UserProvider, public socialProvider: SocialProvider, private zone: NgZone) {
this.name = this.navParams.get('name');
this.otherUid = this.navParams.get('uid');
this.currentUid = this.userProvider.currentUid();
}
ionViewDidLoad() {
this.zone.run(() => {
this.users = this.userProvider.getUserFollowers(this.otherUid);
});
}
追随者-page.html中
<ion-header>
<ion-navbar color='danger'>
<ion-title>{{name}} Followers</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item style="background-color: #fff" *ngIf="!(users | async)">
<ion-avatar item-left>
<img src="assets/img/defaultAvatar.png">
<h2>Loading...</h2>
</ion-avatar>
</ion-item>
<user-item *ngFor="let user of users | async" [user]="user">
</user-item>
</ion-list>
</ion-content>
用户-provider.ts
//Get List of followers of uid
getUserFollowers(uid) {
let users = this.af.database.list(`/users/${uid}/followers`, {
query: {
limitToFirst: 10
}
});
return users;
}
用户-item.html
<ion-item style="background-color: #fff" text-wrap>
<ion-avatar item-left (click)="userProfile()">
<img [class]="user.visibility > 1 ? 'profile-pic verified' : 'profile-pic'" [src]="user?.avatar ? user.avatar : 'assets/img/defaultAvatar.png'">
</ion-avatar>
<h2 (click)="userProfile(user)">{{user?.name}}</h2>
<button ion-button item-right *ngIf="!(following)" (click)="followUser()">{{user?.followerCount}} Followers</button>
<button ion-button outline item-right icon-left *ngIf="following" (click)="followUser()">
<ion-icon name="checkmark"></ion-icon>Followed
</button>
</ion-item>
如果没有limitToFirst查询,它会将正确数量的关注者显示为用户项目,但是个人资料头像以及姓名和关注者状态均为空白。当我点击头像时,它会推送正确的用户个人资料页面,以便数据存在,但DOM没有更新。
我在我的应用程序的发现选项卡中有相同的代码(没有NgZone),并且在那里完美运行。
我在没有NgZone的情况下尝试了它,但无济于事,所以我完全迷失了如何让这些用户的信息显示出来。
提前致谢!