时间戳

首页 > 解决方案 > Div 或 span 的内联样式不使元素内联

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

问题描述

我有一个bootstrap3 navbar. navbar右侧有一个登录表单以及登录和注册按钮。我希望一旦用户成功登录，这些控件就会消失，并且注册和个人资料链接会出现（当用户单击退出时反之亦然）。我能够做到这一点，[hidden]="someValue"但我认为使用hidden不是正确的方法。我想过使用它，*ngIf但我的问题是登录表单和注册按钮出现在单独的行中，而不是在单行中。我尝试使用<div>with inlinestyle ，<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>

标签： angular5

解决方案

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

推荐阅读