Cuando edito un formulario, obtengo 3 valores diferentes en console.log, pero se muestra el mismo valor en el cuadro de texto utilizando la función de autocompletar de mat en Angular 7.

Cuando edito mi formulario, obtengo 3 valores diferentes en la consola. Pero en el cuadro de texto muestra el mismo valor. Estoy usando el autocompletado “mat” y creando un cuadro de texto dinámico.
“`typescript
for (let i=0,j=1,k=0; i < this.filtersval.chordArray; i++) { 
this.filters.vostag[i] = this.response['USMVOS'+(k.toString()+j.toString()).slice(-2)];
alert(this.filters.vostag[i]) 
this.filters.vogtag[i] = this.response['USMVOG'+(k.toString()+j.toString()).slice(-2)];
this.filters.perftag[i] = this.response['USMPERF'+(k.toString()+j.toString()).slice(-2)];
this.filters.agcdesc[i] = this.response['USMAGCLEV'+(k.toString()+j.toString()).slice(-2)+'AB'];
this.filters.agctag[i] = this.response['USMAGCLEV'+(k.toString()+j.toString()).slice(-2)+'BA'];
this.filters.agclimitdesc[i] = this.response['USMAGCLIM'+(k.toString()+j.toString()).slice(-2)+'AB'];
this.filters.agclimittag[i] = this.response['USMAGCLIM'+(k.toString()+j.toString()).slice(-2)+'BA'];
this.filters.snrdesc[i] = this.response['USMSNR'+(k.toString()+j.toString()).slice(-2)+'AB'];
this.filters.snrtag[i] = this.response['USMSNR'+(k.toString()+j.toString()).slice(-2)+'BA']; 
j++; 
console.log("JSON =>", this.filters.vos_tag[i]); 
}

this.loadTextBox();
“`

html

<div *ngFor="let option of options; index as idx">

  <label>PATH {{idx+1}}:</label>

  <mat-form-field>

    <input #fy1 (keyup)="onKeyPress(fy1?.value)" type="text" [(ngModel)]="filters.vos_tag[idx]" matInput [formControl]="myControl19" [matAutocomplete]="sss">

    <mat-autocomplete #sss="matAutocomplete">

      <mat-option *ngFor="let opt of configfilteredOptions19 | async" [value]="opt.name">

          {{opt.name}}

      </mat-option>

    </mat-autocomplete>

  </mat-form-field>

</div>

descripción de la imagen

davy.ai

July 13, 2023 at 12:59 am

Según el código y la captura de pantalla proporcionados, parece que el problema está con la vinculación ngModel en los cuadros de texto dinámicos. El bucle for itera sobre una matriz de objetos y asigna valores a las propiedades del objeto this.filters. Luego, los cuadros de texto en el código HTML están vinculados a estas propiedades usando ngModel, por lo que sus valores iniciales se llenan correctamente. Sin embargo, cuando un usuario edita un cuadro de texto, la vinculación ngModel actualiza la propiedad correspondiente, lo que hace que las declaraciones console.log impriman valores diferentes para el mismo cuadro de texto.

Para resolver este problema, debemos asegurarnos de que los cuadros de texto en el código HTML estén correctamente vinculados a los objetos en la matriz this.filters. Una forma de hacer esto es usar trackBy en el bucle ngFor para identificar cada objeto por su índice, de esta manera:

<div *ngfor="let filter of filters; let i=index; trackBy: trackByFn">
  <label>PATH {{i+1}}:</label>
  <mat-form-field> 
    <input #fy1="" (keyup)="onKeyPress(fy1?.value)" type="text" [(ngmodel)]="filter.vos_tag" matinput="" [formcontrol]="myControl19" [matautocomplete]="sss">
    <mat-autocomplete #sss="matAutocomplete">
      <mat-option *ngfor="let opt of configfilteredOptions19 | async" [value]="opt.name">
          {{opt.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

Observa cómo estamos utilizando let filter of filters para iterar sobre la matriz this.filters, y cómo estamos vinculando cada cuadro de texto a la propiedad vos_tag del objeto filter actual. También estamos utilizando una función trackByFn para identificar cada objeto por su índice:

trackByFn(index: number, filter: any): number {
  return index;
}

Al hacer esto, aseguramos que cada cuadro de texto esté vinculado al objeto correcto en la matriz, y que editar un cuadro de texto solo actualice la propiedad correspondiente de ese objeto. Esto debería eliminar el problema de obtener valores diferentes en la consola para el mismo cuadro de texto.

Answer

davy.ai

July 13, 2023 at 12:59 am
Según el código y la captura de pantalla proporcionados, parece que el problema está con la vinculación ngModel en los cuadros de texto dinámicos. El bucle for itera sobre una matriz de objetos y asigna valores a las propiedades del objeto this.filters. Luego, los cuadros de texto en el código HTML están vinculados a estas propiedades usando ngModel, por lo que sus valores iniciales se llenan correctamente. Sin embargo, cuando un usuario edita un cuadro de texto, la vinculación ngModel actualiza la propiedad correspondiente, lo que hace que las declaraciones console.log impriman valores diferentes para el mismo cuadro de texto.

Para resolver este problema, debemos asegurarnos de que los cuadros de texto en el código HTML estén correctamente vinculados a los objetos en la matriz this.filters. Una forma de hacer esto es usar trackBy en el bucle ngFor para identificar cada objeto por su índice, de esta manera:
```
<div *ngfor="let filter of filters; let i=index; trackBy: trackByFn">
 <label>PATH {{i+1}}:</label>
 <mat-form-field> 
 <input #fy1="" (keyup)="onKeyPress(fy1?.value)" type="text" [(ngmodel)]="filter.vos_tag" matinput="" [formcontrol]="myControl19" [matautocomplete]="sss">
 <mat-autocomplete #sss="matAutocomplete">
 <mat-option *ngfor="let opt of configfilteredOptions19 | async" [value]="opt.name">
 {{opt.name}}
 </mat-option>
 </mat-autocomplete>
 </mat-form-field>
</div>
```
Observa cómo estamos utilizando let filter of filters para iterar sobre la matriz this.filters, y cómo estamos vinculando cada cuadro de texto a la propiedad vos_tag del objeto filter actual. También estamos utilizando una función trackByFn para identificar cada objeto por su índice:
```
trackByFn(index: number, filter: any): number {
 return index;
}
```
Al hacer esto, aseguramos que cada cuadro de texto esté vinculado al objeto correcto en la matriz, y que editar un cuadro de texto solo actualice la propiedad correspondiente de ese objeto. Esto debería eliminar el problema de obtener valores diferentes en la consola para el mismo cuadro de texto.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cuando edito un formulario, obtengo 3 valores diferentes en console.log, pero se muestra el mismo valor en el cuadro de texto utilizando la función de autocompletar de mat en Angular 7.

Answer

davy.ai