元素显示不正确答案

【问题标题】：Elements are not displayed correctly元素显示不正确
【发布时间】：2022-01-31 20:07:26
【问题描述】：

我有一个注册和登录页面，加载时应该是这样的。

但是当页面加载时，首先看起来像这样，在页面刷新（f5）之后更新元素，然后看起来正确。

有谁知道可能是什么原因？

  <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>

.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 =>
                        {
                
                        }
                        );

            }
            
        }
    }

【问题讨论】：

另外，提供ts文件。有没有写具体的逻辑？
对不起，我刚刚添加了 .ts 文件
你能检查is-invalid 类是否应用于输入吗？我觉得你的问题有点不清楚。
尝试在开发工具中禁用缓存并检查一次。
@Vishwak，我试过了，但没有任何改变

标签： html css angular

【解决方案1】：

其他页面中有 CSS 代码，我应该禁用它。

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color:#00ADB5!important;
}

【讨论】：

您应该尽量避免使用!important（也许还有::ng-deep）——这使得维护代码库变得更加困难，正如您的问题所示。

【解决方案2】：

您可以尝试将 border: none 添加到 mat-form-field 吗？此外，请检查您在输入中拥有的 is-invalid ngClass。它有什么作用？

【讨论】：