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）]進行數據綁定

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

您應該閱讀Angular文檔中有關雙向數據綁定的部分

如果只想使用[ngModel] ，可以但必須使用（ngModelChange）進行更改

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

您可以使用表格來改進它，只需問我有關此問題

Answer 3

您應該使用雙向數據綁定

[（ngModel）]

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

並確保將表格模塊導入app.module.ts

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