Cfrgtkky

I am able to store the data of user.id in the displayFn() function into the sourceId and print it in the console, but when I am trying to access it in the onClick() even after the displayFn() is called it shows undefined in the console. Please don't mind if this is silly question. Below is my code for the component. Thanks in advance.

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

  }

}

Below is my HTML which uses Angular material Autocomplete Form.

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

Try updating your [displayWith]="displayFn" to [displayWith]="displayFn.bind(this)".

You can check here for more information.