Question

在Ionic2组件中，我在HTML模板中使用[hidden]指令。 @Component定义是：

@Component({
  selector: 'login-button',
  template:
    `<button ion-button round (click)="openLogin()" [hidden]="loggedIn">
        Login
        <ion-icon name="arrow-up"></ion-icon>
      </button>

      <button ion-button icon-only menuToggle [hidden]="!loggedIn">
        <ion-icon name="menu"></ion-icon>
      </button>
    `
})

我声明了一个组件变量：

export class LoginButton {

  loggedIn: boolean = false;

[hidden]="loggedIn"正在运作。无论recordIn变量的值是什么，[hidden]="!loggedIn"都会显示按钮。

我该怎么写？

Answer 1

您可以使用*ngIf声明。示例：

    <div *ngIf = "loggedIn">
          <button ion-button round (click)="openLogin()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>
    </div>
    <div *ngIf = "!loggedIn">
          <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
    </div>

--------------> Edit

          <button ion-button round (click)="openLogin()" [hidden]="hideLogin1()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>



          <button ion-button icon-only menuToggle [hidden]="hideLogin2()">
            <ion-icon name="menu"></ion-icon>
          </button>
-----------------------------
export class LoginButton {
        hideLogin1(){
            return true;
        }   

        hideLogin2(){
            return false;
        }
}

Answer 2

我可以建议您正在尝试解释here的第一个错误吗？

~~此外，在Ionic2中，您还可以使用showWhen和hideWhen（文档here），它是否符合您的需求？~~

如何在html模板中否定隐藏指令？

2 个答案: