使用ng-if在poperoverlist中隐藏ion-item

Question

我试图隐藏一个基于contition...........but的列表项，但它不能按预期工作……我将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>
`})

下面是原始代码(我删除了一些line......as，它非常大)

   ` 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)
      }
    });
  }