Angular报错Can't bind to 'ngModel' since it isn't a known property of 'input'.

Angular初学实验如下:

功能: 实现输入框输入字符后,分别在父组件和子组件显示

子组件配置

product-alerts.component.ts

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core'

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit
{
  @Input()   //用input注解
  stockCode:string;  //股票代码属性

  @Input()
  amount:number;   //股票数量属性
  constructor() { }

  ngOnInit() {
  }
}

product-alerts.component.html

<p>
product-alerts works!
</p>
<div>
  我是子组件
</div>
<div>
  <!-- 绑定属性 -->
  买{{amount}}手{{stockCode}}股票  
</div>

父组件配置

product-list.component.ts

import { Component } from '@angular/core';

import { products } from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = products;
  stock="1233"
  amount="sdasd"
  share() {
    window.alert('The product has been shared!');
  }
  
}

product-list.component.html

<div>
   <input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
   <input type="text" placeholder="请输入股票数量"
   [(ngModel)]="amount">
   <app-product-alerts [stockCode]="stock" [amount]="amount"></app-product-alerts>
   <P >
     我是父组件
     {{ stock }}
     {{ amount }}
   </P>
 </div>

 

展示界面:

参考链接:https://blog.csdn.net/ldb987/article/details/80186614

在写完父组件以及子组件之后,发现无法显示,报错:

 Can't bind to 'ngModel' since it isn't a known property of 'input'.

百度一下,提示需要引入

FormsModule组件

即:

app.module.ts

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

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at https://angular.io/license
*/

具体原因有待查找