angular - Angular中的自动完成文本框不适用于角度材料？

Question

我正在尝试在来自带有 Angular 材料的 API 的 Angular 数据中创建一个自动完成文本框，但它不起作用，控制台中也没有显示任何错误，只显示空数组。 尽管自动完成请求在网络中显示为 Preflight，但我正在使用 API 中的 Title 字段自动完成。

API JSON 数据：

Id: 1
Title: "Zheng"
WebSite: "www.tokyo.com"
city: "Tokyo"

组件.html

<input matInput placeholder="company1" class="input-text js-input" [matAutocomplete]="auto" [formControl]="searchPublicationCtrl">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let publication of  filteredPublication" [value]="publication.Title">
  <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
<span>{{publication.Title}}</span>
  </mat-option>
</mat-autocomplete> 

组件.ts

    import { Component, OnInit  } from '@angular/core'; 
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'; 
import { AppServiceService } from './../app-service.service';
import { Subscriber } from 'rxjs';
import { FormControl } from '@angular/forms';
import { debounceTime, tap, switchMap, finalize } from 'rxjs/operators';



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

  constructor(private http: HttpClient,private auth : AppServiceService, private _router: Router) {
    this.auth.getPublication().subscribe(
      data => {
      console.warn(data);
    },
    error =>{
      console.log("Publication Error",error);

    }
    ) 

   }

  ngOnInit(): void {

    this.searchPublicationCtrl.valueChanges
    .pipe(
      debounceTime(500),
      tap(() => {
        this.errorMsg = "";
        this.filteredPublication = [];
        this.isLoading = true;
      }),
  
      switchMap(value => this.http.post("http://localhost:3000/articles/publicationData",{} + value)
        .pipe(
          finalize(() => {
            this.isLoading = false
          }),
        )
      )
    )
    .subscribe(data => {
      if (data['Search'] == undefined) {
        this.errorMsg = data['Error'];
        this.filteredPublication = [];
      } else {
        this.errorMsg = "";
        this.filteredPublication = data['Search'];
      }

      console.log(this.filteredPublication);
    });

 



  }

} 

 

标签： angularautocompleteangular-material