更改后(角度)添加/更新输入字段的文本/值

时间:2020-04-07 13:29:35

标签: angular typescript

说我有这个设置:

模板: <input [(ngModel)]="myValue" type="text" /> <button (click)="addText">Click me</button> {{myValue}}

代码:

 addtext()
{
this.myValue='test';
}

如果单击按钮,输入字段将保持空白,但{{myValue}}将更新。

如何将文本添加到输入字段(或更好地更新文本,因为nGModel已经具有实际值)?

编辑:

单击按钮时,将显示一个子组件,用户可以在其中添加/选择一些数据。填充子项后,将使用子项数据发送事件。 父级通过“ onFilled”事件做出反应并更改模型。但是由于View不知道更改,因此输入不会更新(即使ng-reflect-model也是正确的)。

所以我真正的问题是:如何强制angular在视图上运行更新/将其重新呈现?

发射部分:

孩子:

@Output myEmitter:new EventEmitter<object>();

filled(){
this.myEmitter.emit({value:'Test'});
}

父母: (myEmitter)='onMyEmitter($ event)'添加到输入

 onMyEmitter(value) {this.myValue = value}

1 个答案:

答案 0 :(得分:0)

我认为您不是在调用点击事件功能。

<input [(ngModel)]="myValue" type="text" />
<button (click)="addtext()">Click me</button> //addText changed to addtext()
{{myValue}}

您可以在https://angular-h7uata.stackblitz.io

上查看其运行情况

代码:https://stackblitz.com/edit/angular-h7uata