Data binding 角度6[（ngModel）]，考虑到组件中的变量不变

我有一个与主

AppModule

分开的

ClientModule

模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClientsRoutingModule } from './clients-routing.module';
import { ClientsListComponent } from './clients-list/clients-list.component';
import { ClientAddComponent } from './client-add/client-add.component';
import { ClientDetailComponent } from './client-detail/client-detail.component';

@NgModule({
  imports: [
    CommonModule,
    ClientsRoutingModule
  ],
  declarations: [ClientsListComponent, ClientAddComponent, ClientDetailComponent]
})
export class ClientsModule { }

我已在

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我正在尝试将视图中的输入字段绑定到以下组件：

import { Component, OnInit, Input } from '@angular/core';
import { ClientModel } from '../client.model';

@Component({
  selector: 'app-client-add',
  templateUrl: './client-add.component.html',
  styleUrls: ['./client-add.component.scss']
})
export class ClientAddComponent implements OnInit {
  fname: string;
  lname: string;
  constructor() { }

  ngOnInit() {

  }

  createClient() {
    console.log(this.fname, this.lname);
  }
}

以下是我的观点

<div class="card-body">
        <form class="form">
          <div class="form-group">
            <label for="">First Name {{fname}}</label>
            <input type="text" ([ngModel]) = "fname" class="form-control rounded-0" required>
          </div>
          <div class="form-group">
            <label for="">Last Name</label>
            <input type="text" ([ngModel]) = "lname" class="form-control rounded-0">
          </div>

          <button type="button" (click)="createClient()" class="btn btn-success float-center">Create New Client</button>
        </form>
      </div>

名字{{fname}
姓
创建新客户端

当我点击

createnewclient

按钮时，生成的日志是

undefined

我做错了什么？我花了很多时间在我的代码中解决这个问题/bug，但到目前为止还没有什么好处。请帮忙

这可能是不相关的，但我遵循了angular.io指南中关于模块延迟加载的内容，其中提到我应该看到传入的

chunk

文件，而延迟加载发生在网络选项卡中，但我没有看到。也许这与此有关

编辑 我还尝试在

ClientsModule

中导入

FormsModule

。问题依然存在

编辑 但是，

[（ngModel）]

在

AppModule的
app.component.ts
中正常工作

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClientsRoutingModule } from './clients-routing.module';
import { ClientsListComponent } from './clients-list/clients-list.component';
import { ClientAddComponent } from './client-add/client-add.component';
import { ClientDetailComponent } from './client-detail/client-detail.component';

@NgModule({
  imports: [
    CommonModule,
    ClientsRoutingModule
  ],
  declarations: [ClientsListComponent, ClientAddComponent, ClientDetailComponent]
})
export class ClientsModule { }

在我看来，
ngModel
应该是一个盒子里的香蕉
[（ngModel）]
但是我在香蕉
（[]）
中误打了一个盒子