我尝试使用ngClass设置背景颜色，但是ngClass无法在窗体内设置背景。当尝试在窗体外设置背景颜色时它工作正常。
以下代码无效
<div [ngClass]="{bgcolor:true}">
<div class="container">
<form class="register-form" (ngSubmit)="onsubmit(f)" #f="ngForm" novalidate>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<h1>Registration</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="firstName">FIRST NAME</label>
<input name="firstName" id="firstname" class="form-control" type="text" [(ngModel)]="user.firstname" required pattern="[A-Za-z]+" #firstName="ngModel">
<div *ngIf="!firstName?.valid && (firstName?.dirty ||firstName?.touched)" class="calert alert-danger">
<div [hidden]="!firstName.errors.required">
First Name is required
</div>
<div [hidden]="!firstName.errors.pattern">
Only alphabets are allowed
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="lastname">LAST NAME</label>
<input name="lastname" id="lastname" [(ngModel)]="user.lastname" class="form-control" type="text" pattern="[A-Za-z]+" required #lastname="ngModel">
<div *ngIf="!lastname?.valid && (lastname?.dirty ||lastname?.touched)" class="calert alert-danger">
<div [hidden]="!lastname.errors.required">
Last Name is required
</div>
<div [hidden]="!lastname.errors.pattern">
Only alphabets are allowed
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="email">EMAIL ADDRESS</label>
<input name="email" id="email" [(ngModel)]="user.email" class="form-control" type="email" #email="ngModel" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
<div *ngIf="!email?.valid && (email?.dirty ||email?.touched)" class="calert alert-danger">
<div [hidden]="!email.errors.required">
Email is required
</div>
<div [hidden]="!email.errors.pattern">
Enter valid email id
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="mobile">MOBILE NUMBER</label>
<input name="mobile" id="mobile" #mobile="ngModel" [(ngModel)]="user.mobile" class="form-control" type="text" required pattern="[789][0-9]{9}">
<div *ngIf="!mobile?.valid && (mobile?.dirty ||mobile?.touched)" class="calert alert-danger">
<div [hidden]="!mobile.errors.required">
Mobile number is required
</div>
<div [hidden]="!mobile.errors.pattern">
Enter valid mobile number
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="gender">GENDER</label>
<div class="radio" *ngFor="let g of genders">
<label>
<input type="radio" name="gender" required class="form-control radioheight" [(ngModel)]="user.gender" [value]="g" >{{g}}
</label>
<div *ngIf="!gender?.valid && (gender?.dirty ||gender?.touched)" class="calert alert-danger">
<div [hidden]="!gender.errors.required">
Gender is required
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="password">PASSWORD</label>
<input name="password" id="password" #password="ngModel" [(ngModel)]="user.password" class="form-control" type="password" required pattern=".{5,10}">
<div *ngIf="!password?.valid && (password?.dirty ||password?.touched)" class="calert alert-danger">
<div [hidden]="!password.errors.required">
Password is required
</div>
<div [hidden]="!password.errors.pattern">
Contain 5 to 10 characters
</div>
</div>
</div>
</div>
<div class="row">
<input type="hidden" name="role" id="role" [(ngModel)]="user.role" class="form-control">
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button type="submit" [disabled]="!f.valid" class="btn btn-default regbutton">Register</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button (click)="onclick()" class="btn btn-default logbutton">Sign in</button>
</div>
</div>
</form>
</div>
</div>
但是当我尝试在下面的表单之外设置时它正在工作
<div [ngClass]="{bgcolor:true}">
<p>test</p>
</div>
component.css
.bgcolor{
background-color:#194c4f;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
}
.register-form{
font-size: 16px;
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.regbutton{
height: 50px;
width: 100px;
background-color:tomato;
border-radius: 0px;
font-size: 18px;
color:white;
border: none !important;
margin-bottom: 5px;
margin-left: 110px;
}
.regbutton:hover{
color: white;
background-color:#aa422f;
}
.regbutton:active{
color: white;
background-color:#aa422f;
}
.logbutton{
height: 50px;
width: 100px;
background-color:yellowgreen;
border-radius: 0px;
font-size: 18px;
color:white;
border: none !important;
margin-bottom: 5px;
}
.logbutton:hover{
color: white;
background-color:darkolivegreen;
}
.logbutton:active{
color: white;
background-color:darkolivegreen;
}
.register-form label,h1{
color: aliceblue;
}
.register-form input{
margin-bottom: 5px;
width: 430px;
height: 40px;
border-radius: 0px;
}
.radioheight
{
height: 15px !important;
margin-left: 10px;
}
我知道wwts worng帮助我提前感谢
答案 0 :(得分：3)