Búsqueda de sitios web

angular - ¿El valor de Ngmodel se está actualizando incorrectamente?

Estoy usando un componente de calendario y un desplegable de un tercero, si cambio el valor, el valor de ngModel se actualiza incorrectamente. Tiene que tomar el valor actual, pero en su lugar toma el valor antiguo

ejemplo: ngmodel no se está actualizando

¿Cómo actualizar el valor actual en ngModel..? Por favor, sugiera una buena respuesta

Procedimiento de reproducción:

1. ejecutar enlace de muestra

  1. cambiar el valor del menú desplegable o del calendario

3. ver el registro de la consola, el valor actual se toma usando el argumento pero ngmodel muestra el valor antiguo

Archivo Html

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

<ejs-datepicker id="date" (change)="onChange($event)" [(ngModel)]="ModelDate"> </ejs-datepicker>

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (change)="onDropChange($event)"></ejs-dropdownlist>

{{ModelDate}}

archivo ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public ModelDate : any ;


  public data: string[] = [ 'Badminton', 'Basketball', 'Cricket', 'Football' ];
    // set a value to pre-select
    public Modelvalue: string = 'Badminton';

  onChange(args){
    // debugger         
      console.log("NgModelvalue:" + this.ModelDate);    
     console.log("Selected value:"  +args.value);
  }
  onDropChange(args){
    debugger
    // args.dataBind();
    console.log("NgModelvalue:" + this.Modelvalue);    
     console.log("Selected value:" +args.value);
  }
}

Respuesta #1

Este es un comportamiento esperado y está conectado al evento de cambio. Básicamente, cuando se dispara el evento de cambio, la parte de evento de ngModel aún no se ha actualizado.

Básicamente, necesitas usar (ngModelChange) por separado con [ngModel].

Ver más aquí: https://github.com/angular/angular/issues/3406

y aquí: Evento de cambio en Angular 2 - cambios del modelo

Respuesta #2

Reemplaza la función (change) con la función (ngModelChange). Porque actualizar el valor del modelo está tomando un poco más de tiempo y el registro se imprime antes.

Prueba esto -

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>

Imprimirá datos cada vez que el valor del modelo cambie.

Artículos relacionados