使用 FormGroup 时角材料自动完成不起作用

Question

我使用材料自动完成输入之后，我必须获取输入值并将它们发送到另一个服务以获得响应。

我的对象数组如下：-

[
    {
        "Id": 100,
        "Name": "Hyderabad"
    },
    {
        "Id": 101,
        "Name": "Delhi"
    },
    {
        "Id": 102,
        "Name": "Avinashi"
    },
    {
        "Id": 103,
        "Name": "Chennai"
    },
    {
        "Id": 104,
        "Name": "Aurangabad"
    },
    {
        "Id": 105,
        "Name": "Surat"
    },
    {
        "Id": 106,
        "Name": "Ernakulam"
    },
    {
        "Id": 107,
        "Name": "Chandigarh"
    },
    {
        "Id": 108,
        "Name": "Manali"
    },
    {
        "Id": 109,
        "Name": "Bangalore"
    }

]

在这里，我必须显示显示的名称并将 ID 发送到服务以获取响应。

我的 HTML 代码。仪表板.html

                <form class="form-inline" (submit)="availabeBuses($event)">
                <div class="form-group" style='margin-right:26px'>
                    <label style='margin-right:16px'><b>From : </b></label>
                    <input type="text" id="Source" matInput [formControl] ="myControl"  [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{option.Name}}
                        </mat-option>
                    </mat-autocomplete>
                </div>
                <button class="btn btn-md btn-primary" type="submit" style='margin-left: 20px'>
                    <i class="fa fa-dot-circle-o"></i>
                    submit</button>
            </form>

这是我的dashboard.ts

import { DashboardService } from 'src/app/source/services/dashboard/dashboard.service';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
import { DatePipe } from '@angular/common';

export interface cityData {
  Id: string;
  Name: string;
}

const lokalString = localStorage.getItem('sources');
const localData = JSON.parse(lokalString);

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {

  sourceCity;
  destinationCity;
  dateofJourney;

  constructor(private dashboardService: DashboardService, private toastr: ToastrService, private datePipe: DatePipe) { 

    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => typeof value ==='string' ? value : value.Name),
        map(Name => Name ? this._filter(Name) : this.options.slice(0, 10))
      );
      
      console.log("inside constructor");
      console.log(this.filteredOptions);
         
  }

  myControl = new FormControl();
  options: cityData[] = localData;
  filteredOptions: Observable<cityData[]>;

  ngOnInit() {
      
    // console.log("Dashboard component is working.");
    this.getsources();
  }

  displayFn(user: cityData): string {
    return user && user.Name ? user.Name : '';
  }

  private _filter(Name: string): cityData[] {
    const filterValue = Name.toLowerCase();

    return this.options.filter(option => option.Name.toLowerCase().indexOf(filterValue) === 0);
  }


  getsources() {
    this.dashboardService.allSourcesService().subscribe(
      response => {
        this.sourceResponse(response)
      });
  }

  sourceResponse(res) {
    let sourceResponse
    // console.log(res);
    sourceResponse = res.data;
    localStorage.setItem('sources', JSON.stringify(sourceResponse));
  }

  availabeBuses(event : any) {

    const target = event.target;
    const Source = target.querySelector('#Source').value;
    this.sourceCity = Source;
    
    console.log(this.sourceCity);
    
    if (this.sourceCity == undefined || this.sourceCity == null || this.sourceCity == '') {
      this.toastr.error("Please select Source City");
      return false;
    }
    if (this.destinationCity == undefined || this.destinationCity == null || this.destinationCity == '') {
      this.toastr.error("Please select Destination City");
      return false;
    }
    if (this.dateofJourney == undefined || this.dateofJourney == null || this.dateofJourney == '') {
      this.toastr.error("Please select Date Of Journey");
      return false;
    }
    let body = {
      sourceId: this.sourceCity,
      destinationId: this.destinationCity,
      journeyDate: this.datePipe.transform(new Date(this.dateofJourney), 'dd-MM-yyyy')
    }

    console.log(body);

    return this.dashboardService.availableBuses(body).subscribe(
      response => {
        this.availableBusResponse(response);
      });
  }
  
  availableBusResponse(res) {
    let busesData
    console.log(res);
  }
}

这是我的dashboard.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { RootObject, sources } from '../../modules/sources';

@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor(private http: HttpClient) {

  }

  allSourcesService() {
    // let authHeaders = {
    //   headers: new HttpHeaders({
    //       'Content-Type': 'application/json',
    //       'Authorization': "Bearer " +localStorage.getItem('accessToken'),
    //     })
    // }
    var formdata = new FormData();
    return this.http.post(`${environment.voso.localBaseUrl}${environment.voso.Buses.Allsources}`, formdata)      //   , authHeaders
  }
  availableBuses(body) {
     // let authHeaders = {
    //   headers: new HttpHeaders({
    //       'Content-Type': 'application/json',
    //       'Authorization': "Bearer " +localStorage.getItem('accessToken'),
    //     })
    // }
    return this.http.post(`${environment.voso.localBaseUrl}${environment.voso.Buses.AvailableBuses}`, body)
  }

}

我需要在用户选择名称时发送 ID 并显示名称给他们。

每当我使用表单组时，表单控件自动完成功能就会停止工作。