Can't bind to 'ngModel' ?

Question

问题描述

在NG-ZORRO教程中（https://github.com/NG-ZORRO/t...）一步一步地按照教程实现的却报Can't bind to 'ngModel' since it isn't a known property of 'input'.
浏览器显示 setup works! 之前的步骤是可以实现的接下来的步骤就报错了。

问题出现的环境背景及自己尝试过哪些方法

开发用的版本Angular CLI: 7.3.1,Node: 10.15.1,OS: win32 x64,Angular: 7.2.4

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

这是app-routing.modules.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SetupComponent } from './pages/setup/setup.component';

const routes: Routes = [
  { path: 'setup', component: SetupComponent },
  { path: '', redirectTo: '/setup', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }



这是app.modules.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';

import { SetupModule } from './pages/setup/setup.module';

registerLocaleData(en);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    SetupModule
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是app.component.html:
<router-outlet></router-outlet>
到这一步浏览器可以显示 setup works! 

这是local-storage.service.ts:
import { Injectable } from '@angular/core';

const ls = localStorage;

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

  constructor() { }

  public get<T>(key: string): any {
    return JSON.parse(ls.getItem(key)) as T;
  }

  public getList<T>(key: string) {
    const before = ls.getItem(key);
    return before ? (JSON.parse(before) as T[]) : [];
  }

  public set(key: string, value: any): void {
    if (!value && value === undefined) { return; }
    const arr = JSON.stringify(value);
    ls.setItem(key, arr);
  }
}

这是local-storage.namespace.ts:
export const GLOBAL_NAMESPACE = 'today.';

export const APP_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'appInfo.';
export const INIT_FLAG = APP_INFO_NAMESPACE + 'initFlag';
export const START_USING_DATE = APP_INFO_NAMESPACE + 'startUsingDate';

export const USER_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'userInfo.';
export const USERNAME = USER_INFO_NAMESPACE + 'username';
export const AVATAR_CODE = USER_INFO_NAMESPACE + 'avatarCode';

export const TODO_NAMESPACE = GLOBAL_NAMESPACE + 'todo.';
export const TODOS = TODO_NAMESPACE + 'todos';

export const LIST_NAMESPACE = GLOBAL_NAMESPACE + 'list.';
export const LISTS = LIST_NAMESPACE + 'lists';

export const SUMMARY_NAMESPACE = GLOBAL_NAMESPACE + 'summary.';
export const LAST_SUMMARY_DATE = SUMMARY_NAMESPACE + 'lastSummaryDate';
export const SUMMARIES = SUMMARY_NAMESPACE + 'summaries';

这是setup.component.ts:
import { Component, OnInit } from '@angular/core';

import { LocalStorageService } from '../../services/local-storage/local-storage.service';
import {
  USERNAME,
  INIT_FLAG,
  START_USING_DATE
} from '../../services/local-storage/local-storage.namespace';
import { getTodayTime } from '../../../utils/time';

@Component({
  selector: 'app-setup',
  templateUrl: './setup.component.html',
  styleUrls: ['./setup.component.css']
})
export class SetupComponent implements OnInit {
  username: string;
  constructor(private store: LocalStorageService) { }

  ngOnInit() {
  }

  completeSetup(): void {
    this.store.set(INIT_FLAG, true);
    this.store.set(START_USING_DATE, getTodayTime());
    this.store.set(USERNAME, this.username);
  }
}

这是setup.component.html:
<div class="full-screen page-content">
  <div class="wrapper">
    <img class="logo-img" src="./assets/img/logo.png" alt="">
    <div class="text-wrapper">
      <h1 class="title-text">
        Today
      </h1>
    </div>
    <input nz-input placeholder="请输入你喜欢的用户名" #usernameInput [(ngModel)]="username">
    <button nz-button [nzType]="'primary'" (click)="completeSetup()" [disabled]="!usernameInput.value">
      开始
    </button>
    <div class="copy-right">
      Copyright © 2018 Wendell Hu
    </div>
  </div>
</div>

你期待的结果是什么？实际看到的错误信息又是什么？

我期待可以得到

可是浏览器一直报这样的错

Answer 1

在setup.module.ts页面中引入，import { FormsModule } from '@angular/forms'，并在@ngModule的imports里声明

Answer 2

把这个加到app.module.ts

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

然后在@NgModule里的imports里声明