javascript - Angular autocomplete on select get all object of selected value - Stack Overflow

admin管理员组

文章数量:1290308

I have an autoplete ponent.

I passe an array of object.

I would like that when I select an option I get all item informations (option) not just the field value (option.name)

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutoplete]="auto">
        <mat-autoplete #auto="matAutoplete" (optionSelected)='selectOption($event.option)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autoplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

Component ts

export class SearchLeagueComponent implements OnInit {
  constructor(private searchLeagueService: SearchLeagueService) { }
  myControl = new FormControl();
  options: ILeague[] = [
    {
      _id: '',
      teams: [],
      name: '',
      sport: ''
    }
  ];
  filteredOptions: Observable<ILeague[]> | undefined

  ngOnInit() {
    this.searchLeagueService.getLeaguesList().toPromise().then(data => this.options = data)
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        //startWith(''),
        map((value: string) => this._filter(value))
      );
  }
  selectOption(val: string) {
    console.log(val)
  }
  private _filter(value: string): ILeague[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}

Actually I'm using (optionSelected) but it only return selected value.

I should get also the id.

I have an autoplete ponent.

I passe an array of object.

I would like that when I select an option I get all item informations (option) not just the field value (option.name)

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutoplete]="auto">
        <mat-autoplete #auto="matAutoplete" (optionSelected)='selectOption($event.option)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autoplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

Component ts

export class SearchLeagueComponent implements OnInit {
  constructor(private searchLeagueService: SearchLeagueService) { }
  myControl = new FormControl();
  options: ILeague[] = [
    {
      _id: '',
      teams: [],
      name: '',
      sport: ''
    }
  ];
  filteredOptions: Observable<ILeague[]> | undefined

  ngOnInit() {
    this.searchLeagueService.getLeaguesList().toPromise().then(data => this.options = data)
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        //startWith(''),
        map((value: string) => this._filter(value))
      );
  }
  selectOption(val: string) {
    console.log(val)
  }
  private _filter(value: string): ILeague[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}

Actually I'm using (optionSelected) but it only return selected value.

I should get also the id.

• javascript
• angular
• typescript
• angular-material2

Share Improve this question Follow edited Nov 29, 2020 at 19:12 infodev asked Nov 29, 2020 at 18:10 infodevinfodev 5,2352222 gold badges8181 silver badges152152 bronze badges 2

• meybe you should just pass the ($event) just like (optionSelected)="onItemSelect($event)" – siavash bashiri Commented Nov 29, 2020 at 18:43
• It will send an $event but the value will contain same thing – infodev Commented Nov 29, 2020 at 18:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You should pass the ($event) to selectOption().

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutoplete]="auto">
        <mat-autoplete #auto="matAutoplete" (optionSelected)='selectOption($event)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autoplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

then get your object in selectOption() like this

import { MatAutopleteSelectedEvent } from '@angular/material/autoplete';


  selectOption(e: MatAutopleteSelectedEvent) {
     const item: **YOUR INTERFACE** = e.option.value;
     console.log(item);
  }

Try to use itemDispalayFn function to display options

    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutoplete]="auto">
        <mat-autoplete #auto="matAutoplete" (optionSelected)='selectOption($event)'
            [displayWith]="itemDisplayFn">
            <mat-option *ngFor="let option of filteredOptions | async" 
            [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autoplete>

  itemDisplayFn(item: YOUR INTERFACE) {
        return item? item.name: '';
    }

I think your issue is very relate to my current development issue. which I have solve using below ways:

Html

<mat-autoplete #auto="matAutoplete" (optionSelected)='selectOption($event.option,$event.option._element.nativeElement.OptionValue)'>
    <mat-option [OptionValue]="option" *ngFor="let option of filteredOptions | async" [value]="option.name">
        {{option.name}}
    </mat-option>
</mat-autoplete>

.ts File

selectOption(val: string,option:any) {
  console.log(val);
  console.log("option : ",option);
}

Hope it help you.

Here in this example I have fill current option value inside custom attribute(OptionValue). Once event fire then that attribute value pass as an argument of 'selectOption()' function.

本文标签： javascriptAngular autocomplete on select get all object of selected valueStack Overflow