ng-ifを使用してpoperoverlist内のイオンアイテムを隠す

Question

contitionに基づいてリストアイテムを非表示にしようとしていますが、期待どおりに動作していません......

（iは、その非常に大きいよう......いくつかの行を削除した）iが偽として（可変）TOF初期化が、アイテムは常に以下

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はあなただけ私がhidden属性

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

を使用することをお勧めします項目を非表示にするのであれば、あなたはしかし

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

を行うことができますAngular1とAngular2とその*ngIf

です編集：

コメントに基づいて、あなたは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. 

、あなた」 d 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) 
     } 
    }); 
    }