mat-autoComplete中的占位符不起作用，如Angular Material Documentation中所示

我使用的是角材文档中提供的相同代码。根据Angular Material网站，Angular Material的垫-自动完成控制示例如下

根据角度材料文档的行为

但是我的页面占位符停留在最前面，因此无法正常工作

我当地的行为

问题是应该显示在输入字段上的占位符没有出现，我总是在输入字段上方看到小的占位符。即使我正在编辑输入字段，它也不会消失。

我S了一下头。是否可以向我提供有关我可能做错了什么的提示

我在本地HTML中使用的代码

<form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Plan" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{ option }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>

我的打字稿文件中的代码

    从'@ angular / core'导入{Component，OnInit，Input，OnChanges，SimpleChanges}; 
    从'@ angular / router'导入{Router}; 
    从'@ angular / forms'导入{FormControl，Form}; 
    从“ rxjs / Observable”导入{Observable}；
    从'rxjs / operators'导入{map}; 
    从'rxjs / operators / startWith'导入{startWith}; 
    @Component（{
        选择器：'app-my-component'，
        templateUrl：'./ app-my-component.component.html '，
        styleUrls：['./ app-my-component.component.scss '] 
    }）
    导出类MyComponent实现OnInit，OnChanges { 
        myControl：FormControl = new FormControl（）;

        构造函数（私有路由器：路由器）{} 

        filter（val：string）：string [] {
            返回this.options 
                .filter（option => option.toLowerCase（）。indexOf（val.toLowerCase（））=== 0）; 
        } 

        ngOnInit（）{
            试试{ 
                //临时代码
                this.filteredOptions = this.myControl.valueChanges.pipe（
                    startWith（''），
                    map（val => this.filter（val））
                ）; 
                //临时代码的结尾
            } catch（exception）{ 
                // .... 
            } 
        }
    }