如何为当前用户动态隐藏元素？

Question

所以我有一个用户正在关注的人员列表。我想做到这一点，以便当前用户正在查看来宾用户的关注。删除关注当前用户的按钮。下面是我的尝试。

编辑：当我运行这样的代码时，所有用户都显示按钮并显示以下内容。它不会为当前用户隐藏。

HTML代码：

<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代码：

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 1

this.follows == Parse.User.current().get("username") 在这里，您将一个值与一个将为假的数组进行比较。我会做的是：

在 ionViewWillEnter

中设置了 class 变量 currentUser

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

在 Html 而不是带值的 switch case 中使用 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>

还建议对其他布尔条件也使用 *ngIf 而不是 switch case。

如何为当前用户动态隐藏元素？

How to Dynamically hide element for currentuser?

parse-platform

typescript

ionic2

angular