在 Angular 中使用 mat-form-field 时启动画面挂起

Question

我正在创建一个使用启动画面的应用程序。一切正常，直到我将 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 {}
}

Answer 1

已解决。我试图将 undefined 分配给 [value].

在 Angular 中使用 mat-form-field 时启动画面挂起

Splash screen hangs when using mat-form-field in Angular

angular

typescript

splash-screen