Ngmodel 值更新错误？答案

【问题标题】：Ngmodel value is updating wrongly?Ngmodel 值更新错误？
【发布时间】：2018-09-21 09:19:08
【问题描述】：

如果我更改值 ngmodel 值更新错误，我使用了第三方下拉列表和日历组件。它必须取当前值，而不是取旧值

示例： ngmodel not updating

如何将当前值更新为 ngmodel..？请提出好的答案

复制过程：

1.运行示例链接

更改下拉值或日历值

3.查看控制台日志，使用参数获取当前值，但 ngmodel 显示旧值

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}}

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

【问题讨论】：

标签： angular typescript angular-ngmodel

【解决方案1】：

这是预期行为，它与更改事件有关。基本上，当更改事件被触发时，ngModel 的事件部分还没有更新。

基本上你需要将 (ngModelChange) 与 [ngModel] 分开使用。

在此处查看更多信息：https://github.com/angular/angular/issues/3406

这里：Angular 2 change event - model changes

【讨论】：

您是 Angular 新手这一事实并不能阻止您花一些时间来研究给出的内容并在要求更精确之前尝试自己理解它（几个小时而不是一分钟）
好的@Pac0，但我仍然没有清楚地了解我的解决方案。！

【解决方案2】：

用 (ngModelChange) 函数替换 (change) 函数。因为更新模型值需要更多时间，并且日志会提前打印。

试试这个 -

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

只要模型值发生变化，它就会打印数据。

【讨论】：

嗨@Anusha Bansal，感谢您的宝贵支持......它对我来说很好。
您正在记录 args.value .. 仅使用 args 更改它。当我们将函数与 ngModelChange 绑定时，它将起作用
再次检查。我已经检查了它的工作情况，或者向我展示了日历的 ejs 标记代码你在其中所做的更改。
像这样在 ngModel 之后放置 (ngModelChange) - -datepicker>.. 现在检查

【解决方案3】：

对于您的下拉菜单，您使用了 change() 事件。而不是更改使用 ngModelChange()。通过使用 ngModelChange 你的 ngModel 将会更新。

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

【讨论】：

【解决方案4】：

你现在用什么？你能告诉我一些代码吗？我认为属性绑定或双向绑定 [()] 将解决您的问题

【讨论】：

我想在这里提两件事...... 1）您在 ModelValue 和 ModelDate 中获得价值，在 html 中使用 {{}} 这个括号，您可以看到它。 2) 如果你想在 ts 文件中获取 Value 使用 formcontrol
如果您同意，请勾选此解决方案