![](/img/trans.png)
[英]Setting value via DOM doesnt update the value of the input with ngModel using Angular
[英]Angular 5 ngModel doesnt update value
所以我有以下组成部分:
export class ModuleComponentComponent implements OnInit {
dropzoneConf;
fileService = environment.getFileUrl;
constructor(
private moduleComponentService: ModuleComponentService) {
}
@Input()
selectedComponent: ModuleComponent;
ngOnInit() {
this.setDropZoneConfig();
}
}
在那我有以下html:
<h3 class="m-portlet__head-text m--font-success">
<input class="form-control" type="text" [ngModel]="selectedComponent.title" />
</h3>
以及我在html中添加组件的方式:
<div class="col-lg-8 col-x1-12" *ngIf="selectedComponent != null">
<app-module-component [selectedComponent]="selectedComponent"></app-module-component>
</div>
当我在输入字段中键入内容时,它不会更新selectedComponent.title
变量
谁能告诉我怎么回事?
使用双向绑定
[(ngModel)]="selectedComponent.title"
我们需要使用两种方式与[(ngModel)]进行数据绑定
<h3 class="m-portlet__head-text m--font-success">
<input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />
</h3>
如果只想使用[ngModel] ,可以但必须使用(ngModelChange)进行更改
<h3 class="m-portlet__head-text m--font-success">
<input class="form-control" type="text" [ngModel]="selectedComponent.title" (ngModelChanges)="setTitle($event)" />
</h3>
您可以使用表格来改进它,只需问我有关此问题
您应该使用双向数据绑定
[(ngModel)]
<input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />
并确保将表格模块导入app.module.ts
import { FormsModule } from '@angular/forms';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.