Угловой код материала. Пользовательский интерфейс загружается только после нажатия на компонент материала - PullRequest
Новая
       11

Угловой код материала. Пользовательский интерфейс загружается только после нажатия на компонент материала

0 голосов
/ 18 октября 2019

Angular Material UI загружается только после нажатия. Пожалуйста, проверьте скриншоты до и после клика

До клика: https://ibb.co/syCzMzL

После клика: https://ibb.co/3ChDLmD

В моей посылке нет отдельных material.ts .. У меня есть все импорты в app.module.ts

Мои все импорты в app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { SignupComponent } from './signup/signup.component';
import { AccountComponent } from './account/account.component';
import { InfoComponent } from './info/info.component';
import { MatToolbarModule, MatIconModule, MatSelectModule, MatCardModule, MatListModule, MatButtonModule, MatInputModule } from '@angular/material';
import { HomeComponent } from './home/home.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';


@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    SignupComponent,
    AccountComponent,
    InfoComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatIconModule,
    MatSelectModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ожидается: загрузка всех пользовательских интерфейсов вместе. Текущий: фактически один компонент загружается, остальные загружаются только после щелчка.

Код Compnent: 

<mat-card class="login">
        <div>
          <img class = "lock" src = "assets/images/lock.png">
                   <mat-form-field class = "inputfields" appearance="outline">
                                        <mat-label>Enter Your Username</mat-label>
                                        <input matInput placeholder="User Name">       
                                </mat-form-field>
                                <br>
                                <mat-form-field class = "inputfields" appearance="outline">
                                        <mat-label>Enter Your Password</mat-label>
                                        <input type = "password" matInput placeholder="Password">      
                                </mat-form-field>
                                </div>
                                <button class = "login-btn" mat-flat-button color="accent" [routerLink]="'/account'">Log In</button>
                                <br>
                                <p style="margin-left: 40px">Become a Member?<button class = "signup-btn" mat-flat-button color="accent" [routerLink]="'/signup'">Sign Up</button></p>

                        </mat-card>
...