Javascript 无法访问在中的另一个方法中的一个方法中实例化的成员

我能够将displayFn（）函数中user.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]);
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormControl}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map，startWith}；
从“../data.service”导入{DataService}；
从“@angular/Router”导入{Router}
从“/Global”导入{Global}
从“../locations.service”导入{LocationsService}；
导出类位置{
id：字符串；
值：字符串；
}
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
loc：位置[]=[]；
sourceId：数字；
destinationId：数字；
myControl1=新表单控件（）；
myControl=newformcontrol（）；
过滤深度1：可观察；
过滤装置：可观察；
构造函数（专用路由器：路由器，专用位置：LocationsService）{}
恩戈尼尼特（）{
这是.locations.getLocations（）.subscribe(
数据=>{
对于（变量i=0；数据[i]！=null；i++）{
此位置推送（数据[i]）；
}
},
错误=>{
console.log（“接收数据时出错”）；
},
);
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（值=>typeof值=='string'？值：value.value），
映射（name=>name？this.\u过滤器（name）：this.loc.slice（）
);
this.filteredOptions1=this.myControl1.valueChanges
.烟斗(
startWith（“”），
映射（值=>typeof值=='string'？值：value.value），
映射（name=>name？this.\u过滤器1（name）：this.loc.slice（）
);
}
displayFn（用户：位置）：字符串{
this.sourceId=parseInt（user.id）；
console.log（“sourceId=“+this.sourceId”）；
返回user.value；
}
专用过滤器（名称：字符串）：位置[]{
常量filterValue=name.toLowerCase（）；
返回这个.loc.filter（option=>option.value.toLowerCase（）.indexOf（filterValue）==0）；
}
公共显示FN1（用户：位置）：字符串{
this.destinationId=parseInt（user.id）；
console.log（“destinationId=“+this.destinationId”）；
返回user.value；
}
专用过滤器1（名称1:字符串）：位置[]{
常量filterValue1=name1.toLowerCase（）；
返回这个.loc.filter（option1=>option1.value.toLowerCase（）.indexOf（filterValue1）==0）；
}
onClick（）{
log（“来自onclick，sourceID=“+this.sourceID”）；
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>

{{option.value}}
{{option1.value}

尝试将您的

[displayWith]=“displayFn”

更新为

[displayWith]=“displayFn.bind（this）”

---

您可以提供更多信息。

谢谢，这是答案，事实上我还有另一种愚蠢的方法，但您的答案是完美的。如果您的问题可以通过答案解决，您可以接受答案。我接受了，但投票的最低声望是15，而我只有11。无论如何，谢谢。你不能投赞成票，但当你提出问题时，你可以接受答案。