如何取消 html 模板中的隐藏指令？

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" 正在运行。无论 loggedIn 变量的值如何，[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 模板中的隐藏指令？

How can I negate hidden directive in html template?

html

hidden

components

ionic2