Typescript 为什么有条件渲染会导致material 自动完成中出现奇怪的动画

备选方案A

您可以使用属性hidden以与@if相同的方式显示/隐藏，并且您不会遇到这种行为！

@if(!showForm){
<button (click)="showForm=true">show form</button>
}
<form class="example-form" [hidden]="!showForm"> <!-- changed here -->
  <mat-form-field class="example-full-width">
    <mat-label>Number</mat-label>
    <!-- #docregion input -->
    <input
      type="text"
      placeholder="Pick one"
      aria-label="Number"
      matInput
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      @for (option of options; track option) {
      <mat-option [value]="option">{{option}}</mat-option>
      }
    </mat-autocomplete>
  </mat-form-field>
</form>

stackblitz

备选方案B

您可以使用属性floatLabel始终显示在顶部，而不是让它悬停！

@Input()FloatLabel:FloatLabelType

导出类型FloatLabelType=‘Always’|‘AUTO’； 标签是否应在用户键入时始终浮动.

@if(!showForm){
    <button (click)="showForm=true">show form</button>
} @if(showForm) {
<form class="example-form">
  <mat-form-field class="example-full-width" [floatLabel]="'always'">
    <mat-label>Number</mat-label>
    <!-- #docregion input -->
    <input
      type="text"
      placeholder="Pick one"
      aria-label="Number"
      matInput
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      @for (option of options; track option) {
      <mat-option [value]="option">{{option}}</mat-option>
      }
    </mat-autocomplete>
  </mat-form-field>
</form>
}