Mat-autocomplete - 显示名称但保存用户 ID 值

Posted 2023-03-13

【中文标题】Mat-autocomplete - 显示名称但保存用户 ID 值

【英文标题】：Mat-autocomplete - Display name but save User ID value

【发布时间】：2020-03-29 18:28:25

【问题描述】：

我正在尝试实现自动完成功能，但是我想将选定的用户 ID 保存在数据库中。

也就是说，在自动完成中我想显示用户名来选择，但作为返回值我不想要名称，而是它的 ID。

我认为我的问题出在这一行：

this.userService.getUsers().subscribe(
      (val: any[]) =>
        this.allFruits = val.map(user => user.username);
        this.fruitCtrl.setValue(null); 
       
    )

我的代码 --Stackblitz

Stackblitz

组件

constructor(private userService: UserService) 
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  

  ngOnInit() 
    this.userService.getUsers().subscribe(
      (val: any[]) =>
        this.allFruits = val.map(user => user.username);
        this.fruitCtrl.setValue(null); 
       
    )
  

  remove(fruit: string): void 
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) 
      this.fruits.splice(index, 1);
    
  

  selected(event: MatAutocompleteSelectedEvent): void 
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  

  private _filter(value: string): string[] 
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  

HTML

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      fruit
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      fruit
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

【参考方案1】：

你肯定想要对象流，而不是 this.filteredFruits 中的字符串。使用当前的代码库，您必须找到所选字符串的 id，这听起来很脆弱 - 最好不要将键/值对彼此分开，否则在使用错误的 id 时可能会遇到错误。

this.allFruits = val;

然后将this._filter函数改为过滤object[]而不是string[]：

  private _filter(value: string): any[] 
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.name.toLowerCase().indexOf(filterValue) === 0);
  

对于 Mat 选项：

<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit.id">    
  fruit.name
</mat-option>

现在fruitCtrl 应该有一个 id 作为值

【讨论】：

在过滤函数中我得到以下类型'string []'不可分配给类型'object []

好的，添加了_filter函数。将any[] 更改为您的对象使用的接口

我收到此错误：“字符串”类型上不存在属性“名称”。

您可能在某处声明了类型，例如 - allFruits: string[]。将其更改为this.allFruits: any[]。如果您还没有声明它，它会在某个地方接收该类型。

value.toLowerCase 不是函数 :( 我认为您已经接近解决方案，感谢尝试帮助我