typescript 选择获取选定值的所有对象时Angular 自动完成

9ceoxa92 于 2023-06-24 发布在 TypeScript

关注(0)|答案(3)|浏览(144)

我有一个自动完成组件。
我传递一个对象数组。
我希望当我选择一个选项，我得到所有项目信息（option），而不仅仅是字段值（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"
            [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event.option)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

组分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));
  }
}

实际上我使用的是(optionSelected)，但它只返回选定的值。
我也应该拿到身份证。

typescript

来源：https://stackoverflow.com/questions/65063456/angular-autocomplete-on-select-get-all-object-of-selected-value

3条答案

按热度按时间

bpzcxfmw1#

您应该将**（$event）**传递给selectOption（）。

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

然后像这样在selectOption（）中获取对象

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

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

赞(0）回复(0）举报 2023-06-24

3htmauhk2#

尝试使用itemDispalayFn函数来显示选项

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

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

赞(0）回复(0）举报 2023-06-24

dldeef673#

我认为你的问题与我目前的发展问题非常相关。我用下面的方法解决了这个问题：

Html

<mat-autocomplete #auto="matAutocomplete" (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-autocomplete>

.ts文件

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

希望对你有帮助。
在这个例子中，我在自定义属性（OptionValue）中填充了当前选项值。一旦事件触发，则属性值作为'selectOption()'函数参数传递。

赞(0）回复(0）举报 2023-06-24

我来回答

typescript 选择获取选定值的所有对象时Angular 自动完成

3条答案

Html

.ts文件

相关问题

热门标签

最新问答