Angular mat自动完成和输入未正确显示，我的表单有问题

我从以下位置获得自动完成格式：

我的输入字段在键入内容时不会删除占位符，并且选项也不会显示。看起来javascript是正确的，并且正确地从数据库中提取了所有内容，但是我不明白为什么它们都不工作。我有：

    import { MatAutocompleteModule } from '@angular/material/autocomplete';
    import { MatInputModule } from '@angular/material/input';
    import { MatSelectModule, MatFormFieldModule } from '@angular/material';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

我在某个地方读到，我不应该在里面有if语句，但即使我把它们拿出来也不起作用

在我的模块中

这是我的密码：

html代码 html代码

    <div>
      <br>
      <form (click)="check(submitTag)" #submitTag="ngForm">
        <mat-form-field>
          <input matInput placeholder="skills" [matAutocomplete]="auto" [formControl]="searchTagsCtrl" type="text">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
[displayWith]="displayFn.bind(this)">
            <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
            <ng-container *ngIf="!isLoading">
              <mat-option *ngFor="let tag of filtered_tags" [value]="tag">
                <span>({{tag.tag_name}})</span>
              </mat-option>
            </ng-container>
          </mat-autocomplete>
        </mat-form-field>
      </form>
      <br>
    </div>

你可以看到我输入了A，它在技能上超越了S，但没有完全消失，此外，你可以看到选项菜单没有出现。后端确实正确地提取了信息。 这是输入不工作的图像

---

是否存在开发人员控制台错误？将自动完成从mat表单字段tagZ中删除。Bagley no console Errors and Rew，如果我在mat form Field中或在mat form Field中有它，那么它可能与您编写的代码无关。您是否首先遵循了官方材料文档？你能在stackblitz演示中重现吗？有开发者控制台错误吗？把自动完成从mat表单字段tagZ中去掉。Bagley no console Errors and Rew，如果我在mat form Field中或在mat form Field中有它，那么它可能与您编写的代码无关。您是否首先遵循了官方材料文档？你能在stackblitz演示中复制吗？

    import { Component, OnInit } from '@angular/core';
    import { FormControl, NgForm } from '@angular/forms';
    import { HttpClient } from '@angular/common/http';

    import { debounceTime, tap, switchMap, finalize } from 'rxjs/operators';
    import { TagService } from 'src/app/_services/tag.service';


    @Component({
      selector: 'app-tag',
      templateUrl: './tag.component.html',
      styleUrls: ['./tag.component.css']
    })
    export class TagComponent implements OnInit {
      searchTagsCtrl = new FormControl();
      filtered_tags: any;
      isLoading = false;
      errorMsg: string;

      constructor(private http: HttpClient, private tagService: TagService) { }

      ngOnInit() {

        this.searchTagsCtrl.valueChanges
          .pipe(
            debounceTime(500),
            tap(() => {
              this.errorMsg = "";
              this.filtered_tags = [];
              this.isLoading = true;
            }),
            switchMap(value => {
              if(value.hasOwnProperty('tag_name')){
                return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value.tag_name } )
                .pipe(
                  finalize(() => {
                    this.isLoading = false
                  }),
                )
              }else{
                return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value } )
                .pipe(
                  finalize(() => {
                    this.isLoading = false
                  }),
                )
              }
            })
          )
          .subscribe(data => {
            if (data['tags'].length == 0 ) {
              this.errorMsg = data['message'];
              this.filtered_tags = [];
            } else {
              this.errorMsg = "happy";
              this.filtered_tags = data['tags'];
            }
           });
        }

      displayFn(tag) {
        if (!tag) return '';
        if(tag.hasOwnProperty('tag_id')){
          console.log(tag)
        }else{
          console.log(tag)
        }
      }

      check(form: NgForm){
        console.log('check')
        form.reset()
      }
    }