您好:我们使用Firebase设计了一个离子化的社交应用程序示例,其中有一个名为“关注者”的部分,我们可以找到谁关注了谁,为此我们使用了蓝色和红色两个按钮来区分ngIf在.ts的HTML中,我们保留了一个标志,并根据该标志的状态更改了按钮的颜色,这在模拟器和Web上都可以正常工作,但是在物理设备中构建应用后,看不到那些颜色
you can see the image which is emulator below 但是在物理设备中,我们有两个蓝色的按钮,我知道为什么吗? 您可以在下面看到代码!
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireStorage } from '@angular/fire/storage';
import { AngularFireDatabase } from '@angular/fire/database';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-people',
templateUrl: './people.page.html',
styleUrls: ['./people.page.scss'],
})
export class PeoplePage implements OnInit {
people: any = [];
tasks: any
id: any
followinguser: any = [];
followstatus: any = [];
constructor(public router: Router,
public afAuth: AngularFireAuth,
public store: AngularFireStorage,
public data: AngularFireDatabase,
public platform: Platform,
) { }
ionViewWillEnter() {
this.getfollowinguser();
}
ionViewDidEnter() {
for (let i = 0; i < this.tasks.length; i++) {
for (let j = 0; j < this.followinguser.length; j++) {
if (this.tasks[i].id === this.followinguser[j]) {
this.followstatus[i] = true;
}
else {
this.followstatus[i] = false;
}
}
}
console.log(this.followstatus);
}
goBack() {
this.router.navigate(['/tabs/tabfour'], { replaceUrl: true });
}
ngOnInit() {
this.getuser();
this.platform.backButton.subscribe(() => {
});
}
clicked(i) {
this.follow(this.tasks[i].id);
console.log(i);
}
checkfollowinguser(id) {
setTimeout(() => {
if (this.followinguser.includes(id)) {
return this.followstatus = true;
console.log('true');
}
return this.followstatus = false;
}, 1000);
}
getuser() {
const dbref = this.data.database.ref();
const urlref = dbref.child('/users');
urlref.once("value", (snapshot) => {
snapshot.forEach(child => {
let values = (child.val());
this.people.push(values);
})
let filteredarray = this.people.filter(val => val.id !== this.afAuth.auth.currentUser.uid);
//console.log(filteredarray);
this.tasks = filteredarray;
// console.log(this.tasks);
})
}
getfollowinguser() {
const dataref = this.data.database.ref();
const uref = dataref.child('/following/' + this.afAuth.auth.currentUser.uid);
let dummy = [];
uref.once("value", snap => {
dummy = Object.values(snap.val());
dummy.map(dum => {
this.followinguser.push(dum.id);
})
})
}
getuserdetails(id, node, nodeid) {
let user = id;
let name;
let dbref = this.data.database.ref('/users/' + user);
console.log(dbref);
dbref.once('value', snap => {
name = snap.val().fullname;
console.log(name);
let dataref = this.data.database.ref();
let noderef = dataref.child('/' + node + '/' + nodeid + '/' + id)
noderef.set({
id: id,
name: name,
})
})
}
unfollow(i) {
console.log('inside unfollow');
this.followstatus[i] = false;
let following = 'following'
let followerid = this.tasks[i].id;
let followingid = this.afAuth.auth.currentUser.uid;
let reference = this.data.database.ref('/following/').child(followingid).child(followerid);
reference.remove().then(() => {
console.log('removed');
});
let refer = this.data.database.ref('/followers/').child(followerid).child(followingid);
refer.remove().then(() => {
console.log('removed followers');
})
}
follow(i) {
this.followstatus[i] = false;
let reference1 = this.data.database.ref('/following/' + this.afAuth.auth.currentUser.uid);
console.log(reference1);
let followerid = i;
let followingid = this.afAuth.auth.currentUser.uid;
this.getuserdetails(followerid, 'following', followingid);
this.getuserdetails(followingid, 'followers', followerid);
this.getfollowinguser();
}
}
<ion-header>
<ion-toolbar color="primary" hideBackButton="true">
<ion-buttons slot="start">
<ion-icon name="arrow-back" (click)="goBack()" ></ion-icon>
</ion-buttons>
<ion-title> People</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of tasks, let i= index" lines="full">
<ion-icon name="person" slot="start"></ion-icon>
<ion-label> {{item.fullname}}</ion-label>
<ion-button color="primary" (click)="clicked(i)" *ngIf = "!followstatus[i]">
Follow
</ion-button>
<ion-button color="danger" (click) = "unfollow(i)" *ngIf = "followstatus[i]">
Unfollow
</ion-button>
</ion-item>
</ion-list>
</ion-content>