在 Angular 中使用 mat-form-field 时启动画面挂起
Splash screen hangs when using mat-form-field in Angular
我正在创建一个使用启动画面的应用程序。一切正常,直到我将 mat-form-field 元素添加到登录页面。然后启动画面显示并且永远不会消失。
这是错误还是其他原因?我怎样才能避免这种情况?
您可以在下面找到代码。
我的启动画面实现:
启动画面-component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'splash-screen',
templateUrl: './splash-screen.component.html',
styleUrls: ['./splash-screen.component.css'],
})
export class SplashScreenComponent implements OnInit {
windowWidth: string;
//showSplash = true;
showSplash = false;
ngOnInit(): void {
setTimeout(() => {
this.windowWidth = '-' + window.innerWidth + 'px';
setTimeout(() => {
this.showSplash = !this.showSplash;
}, 500);
}, 3000);
}
}
飞溅-screen.component.html
<div
class="app-splash-screen"
[ngStyle]="{ left: windowWidth }"
*ngIf="showSplash"
>
<div class="app-splash-inner">
<div class="app-logo"></div>
<div class="app-label">LINK easy</div>
<div class="app-loader"></div>
</div>
</div>
我的着陆页实现。这就是问题所在:mat-form-field。当我删除表单中的所有内容时,初始屏幕有效。
登陆-page.component.html
<div class="main-container">
<div class="flex-container">
<!-- <h1 class="header">Mitä tarvitset?</h1> -->
<mat-card>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/projects"
>
<span class="buttonText">PROJEKTIT</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/experts"
>
<span class="buttonText">ASIANTUNTIJAT</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/landing"
>
<span class="buttonText">TARJOUSPYYNTÖ</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/contact"
>
<span class="buttonText">YHTEYDENOTTO</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/landing"
>
<span class="buttonText">REFERENSSIT</span>
</button>
<form class="tp-form">
<mat-form-field class="tp-full-width">
<input
type="text"
placeholder="Hae tästä"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto"
/>
<mat-autocomplete #auto="matAutocomplete">
<mat-option
[routerLink]="['/expert-details']"
[state]="{ id: name[0], name: name }"
*ngFor="let name of names"
[value]="name[0]"
>
{{ name[1] }}
</mat-option>
<mat-option
[routerLink]="['/expert-details']"
[state]="{ id: name[0], name: name }"
*ngFor="let name of names"
[value]="name[0]"
>
{{ name[2] }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</mat-card>
</div>
</div>
着陆页。component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete } from '@angular/material/autocomplete';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.css'],
})
export class LandingPageComponent implements OnInit {
title = 'materialApp';
myControl = new FormControl();
niilo = 'Niilo Salminen';
elli = 'Elli Saartamo';
mari = 'Mari Paananen';
UXDesigner = 'UX Designer';
RDEngineer = 'R&D Engineer';
industrialDesigner = 'Industrial Designer';
names = [
[0, this.niilo, this.UXDesigner],
[1, this.elli, this.RDEngineer],
[2, this.mari, this.industrialDesigner],
];
constructor() {}
ngOnInit(): void {}
}
已解决。我试图将 undefined 分配给 [value].
我正在创建一个使用启动画面的应用程序。一切正常,直到我将 mat-form-field 元素添加到登录页面。然后启动画面显示并且永远不会消失。
这是错误还是其他原因?我怎样才能避免这种情况?
您可以在下面找到代码。
我的启动画面实现:
启动画面-component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'splash-screen',
templateUrl: './splash-screen.component.html',
styleUrls: ['./splash-screen.component.css'],
})
export class SplashScreenComponent implements OnInit {
windowWidth: string;
//showSplash = true;
showSplash = false;
ngOnInit(): void {
setTimeout(() => {
this.windowWidth = '-' + window.innerWidth + 'px';
setTimeout(() => {
this.showSplash = !this.showSplash;
}, 500);
}, 3000);
}
}
飞溅-screen.component.html
<div
class="app-splash-screen"
[ngStyle]="{ left: windowWidth }"
*ngIf="showSplash"
>
<div class="app-splash-inner">
<div class="app-logo"></div>
<div class="app-label">LINK easy</div>
<div class="app-loader"></div>
</div>
</div>
我的着陆页实现。这就是问题所在:mat-form-field。当我删除表单中的所有内容时,初始屏幕有效。
登陆-page.component.html
<div class="main-container">
<div class="flex-container">
<!-- <h1 class="header">Mitä tarvitset?</h1> -->
<mat-card>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/projects"
>
<span class="buttonText">PROJEKTIT</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/experts"
>
<span class="buttonText">ASIANTUNTIJAT</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/landing"
>
<span class="buttonText">TARJOUSPYYNTÖ</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/contact"
>
<span class="buttonText">YHTEYDENOTTO</span>
</button>
<button
mat-button
class="button buttonContent"
mat-button
routerLink="/landing"
>
<span class="buttonText">REFERENSSIT</span>
</button>
<form class="tp-form">
<mat-form-field class="tp-full-width">
<input
type="text"
placeholder="Hae tästä"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto"
/>
<mat-autocomplete #auto="matAutocomplete">
<mat-option
[routerLink]="['/expert-details']"
[state]="{ id: name[0], name: name }"
*ngFor="let name of names"
[value]="name[0]"
>
{{ name[1] }}
</mat-option>
<mat-option
[routerLink]="['/expert-details']"
[state]="{ id: name[0], name: name }"
*ngFor="let name of names"
[value]="name[0]"
>
{{ name[2] }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</mat-card>
</div>
</div>
着陆页。component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete } from '@angular/material/autocomplete';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.css'],
})
export class LandingPageComponent implements OnInit {
title = 'materialApp';
myControl = new FormControl();
niilo = 'Niilo Salminen';
elli = 'Elli Saartamo';
mari = 'Mari Paananen';
UXDesigner = 'UX Designer';
RDEngineer = 'R&D Engineer';
industrialDesigner = 'Industrial Designer';
names = [
[0, this.niilo, this.UXDesigner],
[1, this.elli, this.RDEngineer],
[2, this.mari, this.industrialDesigner],
];
constructor() {}
ngOnInit(): void {}
}
已解决。我试图将 undefined 分配给 [value].