组织显示在angular4

时间:2018-04-18 23:25:44

标签: javascript html html5 angular twitter-bootstrap

我正在使用angular4中的bootstrap进行编码,但显示错误: 错误是底部div登录中颜色为白色的部分:

enter image description here

登录代码:/ login

时显示
<div class="row" style="background-image: url(../assets/img/test.jpg)">
          <div style="background-color: rgba(255, 0, 0, 0.6);"> 
            <nav class="container navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#" style="color: #FFFFFF">test</a>
                    </div>
                    <div class="collapse navbar-collapse" id="navbar-collapse-1">


                        <ul class="nav navbar-nav navbar-right">
                             <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-dashboard"></i>
                                    <p >Dashboard</p>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-sign-in"></i>
                                    <p >Login</p>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-user-plus"></i>
                                    <p >Register</p>
                                </a>
                            </li>

                            <li>
                                <a (click)='logout()'>
                                    <p>Log out</p>
                                </a>
                            </li>
                            <li class="separator hidden-lg hidden-md"></li>
                        </ul>
                    </div>
                </div>
            </nav>

                <div class="container card col-md-4 col-sm-6 col-xs-8 col-xs-offset-2 col-md-offset-4 col-sm-offset-3">
                    <div class="header text-center"><h3>Login</h3></div>

                        <form novalidate class="form-horizontal" #fo='ngForm' (submit)="mySubmit(fo)" >
                      <div class="form-group">
                        <label class="control-label col-sm-2" for="email">Email :</label><br>
                        <div class="col-sm-12">
                          <input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="data.email" #dataemail="ngModel" required minlength="12" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
                        </div>
                        <div  *ngIf="dataemail.errors?.required && dataemail.touched" class="alert alert-danger">Email is required</div>
                        <div *ngIf="dataemail.errors?.minlength && dataemail.touched" class="alert alert-danger">
                            nead at least 12 chars </div>
                        <div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">
                            Email is invalid
                        </div>  
                      </div>

                      <div class="form-group">
                        <label class="control-label col-sm-2" for="password">Password :</label><br>
                        <div class="col-sm-12">
                          <input type="password" class="form-control" name="password" placeholder="Enter Password" [(ngModel)]="data.password" #datapassword="ngModel" required minlength="8">
                        </div>
                        <div  *ngIf="datapassword.errors?.required && datapassword.touched" class="alert alert-danger">Password is required</div>
                        <div *ngIf="datapassword.errors?.minlength && datapassword.touched" class="alert alert-danger">
                            nead at least 8 chars </div>
                      </div>

                      <div class="form-group"> 
                        <div class="footer text-center">
                          <button class="btn btn-fill btn-danger btn-wd" type="submit">Login</button>
                        </div>

                      </div>
                    </form>
                </div>

                <footer class="container footer" >
                <nav class="pull-right">
                    <ul>
                        <li>
                            <a href="#" >
                                Home 
                            </a>
                        </li>
                        <li>
                            <a href="#" >
                                Company
                            </a>
                        </li>
                        <li>
                            <a href="#" >
                                Portfolio
                            </a>
                        </li>
                        <li>
                            <a href="#" >
                                Blog
                            </a>
                        </li>
                    </ul>
                </nav>
        </footer>
          </div>
        </div>

代码app.component.html:代码内容所有页面项目显示

    <div class="wrapper" *ngIf="isLoggedIn else login">

        <div  class="sidebar" data-color="red" data-image="">
            <app-sidebar></app-sidebar>
            <div class="sidebar-background" style="background-image: url(/assets/img/sidebar-5.jpg)"></div>
        </div>

        <div class="main-panel">
            <navbar-cmp ></navbar-cmp>
            <router-outlet></router-outlet>
            <div *ngIf="isMap('maps')">
                <footer-cmp></footer-cmp>
            </div>
        </div>
    </div>

    <ng-template #login>

            <router-outlet></router-outlet>
    </ng-template>

错误仅在登录页面中,但在另一页面中我没有看到任何错误。

0 个答案:

没有答案