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

Question

我可以将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]);
}
}

下面是我的HTML，它使用Angular材料自动完成表单。

<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>

Answer 1

尝试将[displayWith]="displayFn"更新为[displayWith]="displayFn.bind(this)"。

你可以在这里查看更多信息。