Question

我有bootstrap3 navbar。 navbar右侧有登录表单，登录和注册按钮。我希望一旦用户成功登录，这些控件就会消失，注册和配置文件链接会出现（反之亦然，当用户点击退出时）。我可以使用[hidden]="someValue"执行此操作，但我认为使用hidden不是正确的方法。我想过使用*ngIf来做这件事，但我的问题是登录表单和注册按钮显示在单独的行中而不是单行。我尝试使用<div>样式inline以及<span>，但它不起作用

 <div *ngIf = "userNotloggedIn" [ngStyle]="{display: inline}"> <!--tried span as well but it didnt' work either-->
        <li ><!-- Navbar Form --> <!-- Instead of ngIf, if I use [hidden]="!userNotloggedIn" for each li then it works but I want to use ngIf-->
          <form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
            <label for="username" class="control-label required sr-only">Username</label>
            <input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
            <app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
            <label for="password" class="control-label required sr-only">Password</label>
            <input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
            <app-show-errors [control]="loginForm.controls.password"></app-show-errors>

              <button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>

          </form>
        </li>
        <li class="nav-item" > <!-- [hidden]="!userNotloggedIn" works-->
          <a class="nav-link" [routerLink]="signupRouterLink">Sign Up</a>
        </li>
      </div>
      <div *ngIf="!userNotloggedIn" [ngStyle]="{display: inline}">

        <li class="nav-item" > <!-- [hidden]="userNotloggedIn" works-->

          <a [routerLink]="" (click)="onProfileClick()">My Profile</a>
        </li>
        <li class="nav-item" > <!-- [hidden]="userNotloggedIn" works -->
          <a [routerLink]="" (click)="onSignoutClick()">Sign out</a>
        </li>
      </div>

Answer 1

我能够使用ng-container代替div或span解决我的问题，但我不知道为什么div或span没有工作。很高兴接受可以解释这个问题的答案。

Div或span的内联样式不使元素内联

1 个答案: