Início / coding / Perguntas / 79584708
Accepted
newby73
Asked: 2025-04-21 21:17:08 +0800 CST

O preenchimento automático angular mostra valores diferentes quando a opção é selecionada duas vezes

  • 772

Contexto:
Tenho um componente Angular que renderiza um campo de preenchimento automático do Angular Material . O campo tem três opções, e cada opção contém um namee um id. Quando uma opção é selecionada, seu namecampo deve ser exibido no campo.

Problema:
Quando uma opção é selecionada inicialmente, o namecampo é exibido conforme o esperado. No entanto, quando a mesma opção é selecionada novamente, mesmo já estando selecionada, o idcampo exibe o campo. O campo nameexibe o campo da opção selecionada, e não o campo id.

Pergunta
Como isso pode ser corrigido para que, independentemente de quantas vezes uma opção seja selecionada, o namecampo seja sempre exibido, e não o idcampo?

StackBlitz

TS

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatAutocompleteModule,
  MatAutocompleteSelectedEvent,
} from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

interface Item {
  id: string;
  name: string;
}

@Component({
  selector: 'app-autocomplete',
  standalone: true,
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatInputModule],
})
export class AutocompleteComponent {
  options: Item[] = [
    { id: '1', name: 'Item One' },
    { id: '2', name: 'Item Two' },
    { id: '3', name: 'Item Three' },
  ];
  name: string = '';
  id: string = '';
  placeholder: string = 'Select an option';

  resetField() {
    this.name = '';
  }

  selectionChange(e: MatAutocompleteSelectedEvent) {
    this.name = e.option.viewValue;
    console.log(e.option.viewValue); // name
    console.log(e.option.value); // id
  }
}

HTML

<mat-form-field>
  <mat-label>{{ placeholder }}</mat-label>
  <input
    #assetInput
    type="text"
    [placeholder]="placeholder"
    matInput
    [(ngModel)]="name"
    [matAutocomplete]="auto"
  />
  <mat-autocomplete
    #auto="matAutocomplete"
    (optionSelected)="selectionChange($event)"
  >
    <mat-option *ngFor="let option of options" [value]="option.id">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
angular

1 respostas

  1. Best Answer

    Podemos usar displayWitha vinculação de propriedade, onde fornecemos uma função que exibe o valor correto.

    Precisamos .bind(this)que a função possa acessar o escopo do componente, mesmo que ela seja executada dentro do componente de preenchimento automático mat.

    displayFn(id: string) {
  if (!id) return '';
  let index = this.options.findIndex((item) => item.id === id);
  return this.options?.[index]?.name || id;
}

    exibir com:

    @Input()
    displayWith: ((value: any) => string) | null
    Função que mapeia o valor de controle de uma opção para seu valor de exibição no gatilho.

    HTML:

    <mat-form-field>
  <mat-label>{{ placeholder }}</mat-label>
  <input
    #assetInput
    type="text"
    [placeholder]="placeholder"
    matInput
    [(ngModel)]="name"
    [matAutocomplete]="auto"
  />
  <mat-autocomplete
    #auto="matAutocomplete"
    [displayWith]="displayFn.bind(this)"
    (optionSelected)="selectionChange($event)"
  >
    <mat-option *ngFor="let option of options" [value]="option.id">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

    TS:

    import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatAutocompleteModule,
  MatAutocompleteSelectedEvent,
} from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

interface Item {
  id: string;
  name: string;
}

@Component({
  selector: 'app-autocomplete',
  standalone: true,
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatInputModule],
})
export class AutocompleteComponent {
  options: Item[] = [
    { id: '1', name: 'Item One' },
    { id: '2', name: 'Item Two' },
    { id: '3', name: 'Item Three' },
  ];
  name: string = '';
  id: string = '';
  placeholder: string = 'Select an option';

  resetField() {
    this.name = '';
  }

  selectionChange(e: MatAutocompleteSelectedEvent) {
    this.name = e.option.viewValue;
    console.log(e.option.viewValue); // name
    console.log(e.option.value); // id
  }

  displayFn(id: string) {
    if (!id) return '';
    let index = this.options.findIndex((item) => item.id === id);
    return this.options?.[index]?.name || id;
  }
}

    Demonstração do Stackblitz

    • 1

relate perguntas