Angular Autocomplete无法处理JSON中来自API的动态数据？

在JSON格式的角度数据中的文本框上实现自动完成，但它不起作用，也没有任何错误仅在控制台中显示显示空数组。我正在自动完成API中的标题字段。我试了很多，但还是没弄明白。 API是带有JSON数据结构的Post方法，下面我需要标题来自动完成

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

component.html

<label class="label" for="company">Publication</label>
<input matInput placeholder="" 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,FormBuilder, FormGroup } from '@angular/forms';
import { debounceTime, tap, switchMap, finalize, startWith,  map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Subscription,of } from 'rxjs';
import { filter } from 'rxjs/operators';
import 'rxjs/add/operator/startWith';


@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, private formBuilder: FormBuilder,) {  }

  filteredStates: Subscription;
  ngOnInit(): void {
    this.auth.getPublication().subscribe(
      data => {
      console.warn(data);
    },
    error =>{
      console.log("Publication Error",error);

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


    $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });



  }
  

}

 

import { Injectable } from '@angular/core';
import { HttpHeaders } from "@angular/common/http";
import { HttpClient} from '@angular/common/http';
import { AppSetting } from './appsetting'
@Injectable({
  providedIn: 'root'
})
export class AppServiceService {
  private SERVERURL = AppSetting.API;
  constructor(private http: HttpClient) { }

  login(user){
    return this.http.post<any>(this.SERVERURL+"users",user);
  }

  getPublication(){
    let headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json');
    let url  = ("http://localhost:3000/articles/publicationData");
    return this.http.post(url, { headers });
  }


}
 

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpHeaders}；
从'@angular/common/http'导入{HttpClient}；
从“./AppSetting”导入{AppSetting}
@注射的({
providedIn:'根'
})
导出类AppServiceService{
私有服务器URL=AppSetting.API；
构造函数（私有http:HttpClient）{}
登录（用户）{
返回this.http.post（this.SERVERURL+“users”，user）；
}
getPublication（）{
let headers=新的HttpHeaders（）；
headers.set（'Content-Type'，'application/json'）；
让url=（“http://localhost:3000/articles/publicationData");
返回this.http.post（url，{headers}）；
}
}

检查这个链接@RambabuPadimi，但是它说

filter

不是一个函数