Ionic的某些功能可以在Web和仿真器上完美运行,但不能在物理设备上运行

时间:2020-01-13 06:28:17

标签: javascript ionic-framework ionic4

您好:我们使用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>

0 个答案:

没有答案