Angular 5 ngModel 不更新值

Question

我有以下组件：

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 变量

可能发生了什么？

Answer 1

使用双向绑定

 [(ngModel)]="selectedComponent.title"

Answer 2

你应该使用双向数据绑定

[(ngModel)]

<input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />

and make sure to import forms module in app.module.ts

import { FormsModule } from '@angular/forms';

Answer 3

我们需要通过 [(ngModel)]

使用两种方式的数据绑定

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />
</h3>

You should read the part about two way data binding on Angular documentation

如果你只想使用 [ngModel]，你可以，但你必须使用 (ngModelChange)[=13 捕捉变化=]

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" (ngModelChanges)="setTitle($event)" />
</h3>

你可以用表格来改进它，有任何问题都可以问我

Angular 5 ngModel 不更新值

Angular 5 ngModel doesn't update value

javascript

ngmodel

angular

angular5