angular - mat-autocomplete 和输入显示不正确，我的表单有问题

Question

我从以下网址获得了自动完成格式：http ://www.freakyjolly.com/angular-7-6-material-autocomplete-example-with-remote-server-side-results/

输入内容时，我的输入字段未擦除占位符，并且选项未显示。看起来 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 语句，但即使我把它们拿出来也不起作用

在我的 module.ts

这是我的代码：

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>

组件.js

    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()
      }
    }

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

标签： angularangular-materialoptionsmat-form-field