Question

我试图隐藏基于续约的列表项...........但它没有按预期工作......我将tof（变量）初始化为false但是项目无论tof的价值如何，始终保持可见

@Component({
 template: `
<ion-list>
  <button ion-item (click)="navHome()"><ion-icon name="home"></ion-icon> Home</button>
  <button ion-item (click)="navSessionList()">
    <ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> Our Monthly Gatherings </button>
  <button ion-item (click)="navSpeakers()">
  <ion-icon ios="ios-contacts" md="md-contacts"></ion-icon> Speakers </button>

  // ============i want to hide the below item===============================

  <button  ion-item ng-if="tof === 'true'" (click)="navProfile()">
    <ion-icon ios="ios-contact" md="md-contact"></ion-icon> My Profile </button>

  // =============^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^==================================

  <button ion-item (click)="navLogin()"><ion-icon ios="ios-log-in" md="md-log-in"></ion-icon> Login </button>      
</ion-list>
`})

下面是原始代码（我删除了一些......因为它非常大）

   ` import {Component} from '@angular/core';
    import {NavController, AlertController} from 'ionic-angular';
    import { MenuController } from 'ionic-angular';
import { PopoverController, ViewController,  LoadingController } from 'ionic-angular';
@Component({
  template: `
    <ion-list>
      <button ion-item (click)="navHome()"><ion-icon name="home"></ion-icon> Home</button>
      <button ion-item (click)="navSessionList()">
        <ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> Our Monthly Gatherings </button>
      <button ion-item (click)="navSpeakers()">
      <ion-icon ios="ios-contacts" md="md-contacts"></ion-icon> Speakers </button>

      // ============i want to hide the below item===============================

      <button  ion-item ng-if="tof === 'true'" (click)="navProfile()">
        <ion-icon ios="ios-contact" md="md-contact"></ion-icon> My Profile </button>

      // =============^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^==================================

      <button ion-item (click)="navLogin()"><ion-icon ios="ios-log-in" md="md-log-in"></ion-icon> Login </button>      
    </ion-list>
  `
})
class PopoverPage {

  constructor(public viewCtrl: ViewController,public navCtrl: NavController) {
  this.navCtrl=navCtrl;
   }


  }

@Component({
  templateUrl: 'build/pages/about/about.html',
  providers: [EventData]
})
export class LinkToRegistration {
  public tof ="false";
  constructor(private navCtrl: NavController,
  public popoverCtrl: PopoverController,
  public viewCtrl: ViewController,
  public alertCtrl: AlertController,
  private eventData: EventData,
    public userData: UserData,
   public loadingCtrl: LoadingController) {
  this.navCtrl=navCtrl;
  this.eventData = eventData;
 this.userData.getsession().then((session) => {
      this.sessionid = session;
    });

}
ngAfterViewInit() {
    // this.getUsername();

    this.getUsername();


  }

  getUsername() {
    this.userData.getUsername().then((username) => {
      this.username = username;
      console.log("username is :"+this.username);
      if( this.username == null)
      {
        this.tof = "false";
        console.log("the value :"+this.tof);

      }
      else
      {
        this.tof = "true";

        console.log("the value else :"+this.tof)
      }
    });
  }`

提前感谢您的帮助

Answer 1

ng-if是Angular1，Angular2是*ngIf

所以你可以做到

<button ion-item *ngIf="tof === 'true'" (click)="navProfile()">

但是，如果您只想隐藏某个项目，我建议您使用hidden属性

<button ion-item [hidden]="tof === 'true'" (click)="navProfile()">

编辑：

根据评论，如果您将值设置为true或false而不是"true"或"false"（字符串），请尝试

<button ion-item [hidden]="!tof" (click)="navProfile()">

Answer 2

就像@ sameera207所说，你需要在Angular2中使用*ngIf而不是ng-if。

 <button  ion-item *ngIf="tof" (click)="navProfile()">

此外，在为布尔属性赋值时，不要这样做：

public tof = "false"; // <- this assigns a string with the value 'false'

这样做：

public tof = false;  // now tof is a boolean property and the *ngIf should work.

因此，您还需要修改getUsername方法：

getUsername() {
    this.userData.getUsername().then((username) => {

      this.username = username;
      console.log("username is :" + this.username);

      if(this.username == null)
      {
        this.tof = false; // <-- now is a boolean property
        console.log("the value :" + this.tof);
      }
      else
      {
        this.tof = true; // <-- now is a boolean property

        console.log("the value else :" + this.tof)
      }
    });
  }

使用ng-if隐藏poperoverlist中的离子项

2 个答案: