Ngmodel 值更新错误?
Ngmodel value is updating wrongly?
我使用了一个第三方下拉列表和日历组件,如果我更改值 ngmodel 值更新错误。它必须采用当前值而不是它采用旧值
sample:
ngmodel not updating
如何将当前值更新为 ngmodel..?请提出好的答案
Reproducing procedure:
1.run 样本 link
- 更改下拉值或日历值
3.see 控制台日志,使用参数获取当前值但 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);
}
}
你现在用的是什么?能给我一些代码吗?我认为 属性 绑定或双向绑定 [()] 将解决您的问题
这是预期的行为,它与更改事件有关。基本上当更改事件被触发时,ngModel 的事件部分还没有更新。
基本上您需要将 (ngModelChange) 与 [ngModel] 分开使用。
在此处查看更多信息:https://github.com/angular/angular/issues/3406
这里:
用 (ngModelChange) 函数替换 (change) 函数。因为更新模型值需要更多时间并且日志会提前打印。
试试这个 -
<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>
只要模型值发生变化,它就会打印数据。
对于您的下拉菜单,您使用了 change() 事件。而不是更改使用 ngModelChange()。
通过使用 ngModelChange 你的 ngModel 将更新。
<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>
我使用了一个第三方下拉列表和日历组件,如果我更改值 ngmodel 值更新错误。它必须采用当前值而不是它采用旧值
sample: ngmodel not updating
如何将当前值更新为 ngmodel..?请提出好的答案
Reproducing procedure:
1.run 样本 link
- 更改下拉值或日历值
3.see 控制台日志,使用参数获取当前值但 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);
}
}
你现在用的是什么?能给我一些代码吗?我认为 属性 绑定或双向绑定 [()] 将解决您的问题
这是预期的行为,它与更改事件有关。基本上当更改事件被触发时,ngModel 的事件部分还没有更新。
基本上您需要将 (ngModelChange) 与 [ngModel] 分开使用。
在此处查看更多信息:https://github.com/angular/angular/issues/3406
这里:
用 (ngModelChange) 函数替换 (change) 函数。因为更新模型值需要更多时间并且日志会提前打印。
试试这个 -
<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>
只要模型值发生变化,它就会打印数据。
对于您的下拉菜单,您使用了 change() 事件。而不是更改使用 ngModelChange()。 通过使用 ngModelChange 你的 ngModel 将更新。
<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>