無法訪問的成員例項化一個方法在角的另一種方法

我能儲存資料的使用者。 displayFn id()函式sourceId,在控制檯列印它,但是當我試圖訪問它的onClick()即使在displayFn(),它顯示了定義在控制檯。 請不要介意這是愚蠢的問題。 下面是我的程式碼元件。 提前謝謝。

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { DataService } from '../data.service';
import { Router } from '@angular/router'
import { Global } from './Global'
import { LocationsService } from '../locations.service';
export class Locations {
  id: string;
  value: string;
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loc: Locations[] = [];
  sourceId: number;
  destinationId: number;
  myControl1 = new FormControl();
  myControl = new FormControl();
  filteredOptions1: Observable<Locations[]>;
  filteredOptions: Observable<Locations[]>;
  constructor(private router: Router, private locations: LocationsService) {}
  ngOnInit() {
    this.locations.getLocations().subscribe(
      data => {
        for (var i = 0; data[i] != null; i++) {
          this.loc.push(data[i]);
        }
      },
      error => {
        console.log("error in receiving data");
      },
    );
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith<string | Locations>(''),
        map(value => typeof value === 'string' ? value : value.value),
        map(name => name ? this._filter(name) : this.loc.slice())
      );
    this.filteredOptions1 = this.myControl1.valueChanges
      .pipe(
        startWith<string | Locations>(''),
        map(value => typeof value === 'string' ? value : value.value),
        map(name => name ? this._filter1(name) : this.loc.slice())
      );
  }
  displayFn(user: Locations): string {
    this.sourceId = parseInt(user.id);
    console.log("sourceId = " + this.sourceId);
    return user.value;
  }
  private _filter(name: string): Locations[] {
    const filterValue = name.toLowerCase();
    return this.loc.filter(option => option.value.toLowerCase().indexOf(filterValue) === 0);
  }
  public displayFn1(user: Locations): string {
    this.destinationId = parseInt(user.id);
    console.log("destinationId = " + this.destinationId);
    return user.value;
  }
  private _filter1(name1: string): Locations[] {
    const filterValue1 = name1.toLowerCase();
    return this.loc.filter(option1 => option1.value.toLowerCase().indexOf(filterValue1) === 0);
  }
  onClick() {
    console.log("from onclick, sourceID = " + this.sourceId);
    console.log("from onclick, sourceID = " + this.destinationId);
    this.router.navigate(['/services', this.sourceId,this. destinationId]);
  }
}

下面是我的HTML使用角材料自動完成表單。

<form>
<input type="text" placeholder="To" matInput [formControl]="myControl" [matAutocomplete]="auto" id="toPlaceName"
                  class="ajxPlaceCs ui-autocomplete-input">
                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                    {{option.value}}
                  </mat-option>
                </mat-autocomplete>
                <input type="text" placeholder="From" matInput [formControl]="myControl1" [matAutocomplete]="auto1" id="fromPlaceName"
                  class="ajxPlaceCs ui-autocomplete-input">
                <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn1">
                  <mat-option *ngFor="let option1 of filteredOptions1 | async" [value]="option1">
                    {{option1.value}}
                  </mat-option>
                </mat-autocomplete>
<input type="button" name="searchBtn" (click)="onClick()" id="searchBtn" class="chkavailabilityBtn"
                  value="Check Availability" title="Search">
</form>