Jarad Kears Jarad Kears -4 years ago 170
TypeScript Question

How to Dynamically hide element for currentuser?

So I have a list of people that a user is following. I want to make it so that when the current user is viewing a guest user's follow. The button to follow the current user is removed. This is my attempt below.

Edit: when I run the code like this, all users show the button and show the following. It does not hide for current user.

HTML Code:

<ion-header>

<ion-navbar>
<ion-title>Follow</ion-title>
</ion-navbar>

</ion-header>


<ion-content>
<ion-list>
<button ion-item *ngFor="let pic of pics" (click)="viewGuest(pic.user)">
<ion-thumbnail item-left>
<img src="{{pic.avi['url']}}">
</ion-thumbnail>
<h2>{{pic.additional}}</h2>
<p>{{pic.user}}</p>
<div [ngSwitch]="value" item-right>
<span *ngSwitchCase="false">
<span [ngSwitch]="connect">
<span *ngSwitchCase="false">
<button ion-button>Follow</button>
</span>
<span *ngSwitchDefault>
<button ion-button>Following</button>
</span>
</span>
</span>
<span *ngSwitchDefault></span>
</div>
</button>
</ion-list>
</ion-content>


TS Code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { GuestPage} from '../guest/guest'
var Parse = require('parse');

@Component({
selector: 'page-follow',
templateUrl: 'follow.html'
})
export class FollowPage {

follows = []
pics = []
parameter1 = ''
passedUser = ''
value = false
connection = false

constructor(public navCtrl: NavController, public navParams: NavParams) {
Parse.initialize('hidden','unused', "hidden");
Parse.serverURL = 'hidden';
this.parameter1 = navParams.get('param1')
this.passedUser = navParams.get('userParam')
}

ionViewWillEnter(){
if (this.parameter1 == "Followers"){
this.initializeFollowers()
} else{
this.initializeFollowing()
}

if (this.follows == Parse.User.current().get("username")){
this.value = true
} else{
this.value = false
}




console.log(this.parameter1);
}

ionViewDidLeave(){
this.follows.length = 0
this.pics.length = 0
this.parameter1=''
}

initializeFollowers() {
var this_ref = this
var currentUser = Parse.User.current().get("username");
var Follower = Parse.Object.extend("Follow")
var query = new Parse.Query(Follower);
query.equalTo("following", this.passedUser);
query.find({
success: function(follower) {
for (var i = 0; i < follower.length; i++) {
this_ref.follows.push(follower[i].get("follower")),
console.log(this_ref.follows);
}
var picture = Parse.Object.extend("Profile")
var query = new Parse.Query(picture);
query.containedIn("user", this_ref.follows);
query.find({
success: function(picture) {
for (var i = 0; i < picture.length; i++) {
this_ref.pics.push(picture[i].toJSON()),
console.log(this_ref.pics);
}
}
});
}
});
}

initializeFollowing() {
var this_ref = this
var currentUser = Parse.User.current().get("username");
var Following = Parse.Object.extend("Follow")
var query = new Parse.Query(Following);
query.equalTo("follower", this.passedUser);
query.find({
success: function(following) {
for (var i = 0; i < following.length; i++) {
this_ref.follows.push(following[i].get("following")),
console.log(this_ref.follows);
}
var picture = Parse.Object.extend("Profile")
var query = new Parse.Query(picture);
query.containedIn("user", this_ref.follows);
query.find({
success: function(picture) {
for (var i = 0; i < picture.length; i++) {
this_ref.pics.push(picture[i].toJSON()),
console.log(this_ref.pics);
}
}
});
}
});
}

viewGuest(pic: string){
this.navCtrl.push(GuestPage, { userParam: pic})
console.log(pic);

}

}

Answer Source

this.follows == Parse.User.current().get("username") Here you are comparing a value with an array which will be false. What I would do is:

Have a class variable currentUser set in ionViewWillEnter

ionViewWillEnter(){
  this.currentUser=Parse.User.current().get("username");
}

In the Html instead of switch case with value use an if:

<div item-right>
      <span *ngIf="pic.user!=currentUser">
        <span [ngSwitch]="connect">
          <span *ngSwitchCase="false"> 
            <button ion-button>Follow</button>
          </span>
          <span *ngSwitchDefault>
            <button ion-button>Following</button>
          </span>
        </span>
      </span>
    </div>

Also suggest using *ngIf instead of the switch case for the other boolean condition as well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download