[英]Elements are not displayed correctly
但是當頁面加載時,首先看起來像這樣,在頁面刷新(f5)之后更新元素,然后看起來是正確的。
有誰知道可能是什么原因?
register.component.html(用戶名和 Email Texbox)
<mat-form-field appearance="outline">
<mat-label>Benutzername</mat-label>
<input
matInput
type="text"
formControlName="name"
[ngClass]="{ 'is-invalid': f['name'].errors }" autocomplete="off">
<mat-icon matSuffix>person</mat-icon>
<mat-error *ngIf=" f['name'].errors" class="invalid-feedback">
<mat-error *ngIf="f['name'].errors['required']">Benutzername ist erforderlich</mat-error>
<mat-error *ngIf="f['name'].errors['minlength']">
Der Benutzername muss mindestens 8 Zeichen lang sein.
</mat-error>
<mat-error *ngIf="f['name'].errors['maxlength']">
Der Benutzername darf nicht länger als 20 Zeichen sein.
</mat-error>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input
matInput
type="email"
formControlName="email"
[ngClass]="{ 'is-invalid': f['email'].errors }" autocomplete="off">
<mat-icon matSuffix>email</mat-icon>
<mat-error *ngIf=" f['email'].errors" class="invalid-feedback">
<mat-error *ngIf="f['email'].errors['required']">E-Mail ist erforderlich</mat-error>
<mat-error *ngIf="f['email'].errors.serverErrorEmail">
{{serverErrorEmailMessage}}
</mat-error>
<mat-error *ngIf="f['email'].errors['email']">E-Mail ist ungültig</mat-error>
</mat-error>
</mat-form-field>
register.component.css
.box {
padding: 2em;
border: 3px solid #00ADB5;
border-radius: 20px;
width: 450px;
justify-content: center;
flex-direction: column;
margin: auto;
background: transparent;
display: block;
}
.mat-card-header{
display: flex;
justify-content: center;
color: #00ADB5;
text-align: center;
width: 100%;
font-weight: 700;
padding: 20px 0;
}
form{
border-radius: 20px;
justify-content: center;
flex-direction: column;
margin: auto;
color: #00ADB5;
}
.mat-form-field{
width: 100%;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0.5em 0;
}
.mat-stroked-button{
border-color: #00ADB5;
}
::ng-deep .mat-form-field-label{
color: #a6a6a6 !important;
}
::ng-deep .mat-form-field-subscript-wrapper{
font-size: 100%;
margin-top: 0.4em;
top: calc(100% - 1.79em);
}
profile.component.ts
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
id:number = 0;
user: any;
isLoaded:boolean = true;
constructor(private http: HttpClient,private router: Router, private cookieService:CookieService, private route: ActivatedRoute, private serverData: ServerData) { }
ngOnInit(): void
{
this.user = this.serverData.UserToLoadInProfile;
if(this.user == undefined)
{
this.isLoaded = false;
const routeParams = this.route.snapshot.paramMap;
const userIdFromRoute = Number(routeParams.get('userID'));
if(userIdFromRoute == Number(this.cookieService.get('userID')))
{
this.http.get<any>('/backend/api/user',{observe: 'response',withCredentials: true, headers: new HttpHeaders({'Content-Type': 'application/json',})}).subscribe(response2 =>
{
console.log('here!')
if(response2.status == 200)
{
this.user = response2.body;
this.isLoaded = true;
}
},
error =>
{
}
);
}
else
{
this.http.get<any>('/backend/api/user/' + userIdFromRoute,{observe: 'response',withCredentials: true, headers: new HttpHeaders({'Content-Type': 'application/json',})}).subscribe(response2 =>
{
if(response2.status == 200)
{
}
},
error =>
{
}
);
}
}
}
您可以嘗試在 mat-form-field 中添加 'border: none' 嗎? 此外,請檢查您在輸入中擁有的“is-invalid”ngClass。 它有什么作用?
在其他頁面中有一個 CSS 代碼,我應該禁用它。
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color:#00ADB5!important;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.