Блог

Я импортировал модуль FormsModule в модуль.ts, но все равно компиляция завершается ошибкой — не удается привязаться к «ngModel», так как это неизвестное свойство ввода.

Примечание: Я столкнулся с ошибкой после того, как создал отдельные модули для каждого компонента в проекте. Изначально не было никаких ошибок с одним модулем.ts

Я новичок в angular и не могу найти здесь проблему, буду признателен за любую помощь.

Код компонента:

     import { Component } from '@angular/core';
    import{Customer}from"./CustomerApp.model";
    import {FormsModule} from "@angular/forms";
    @Component({
      templateUrl: './CustomerApp.CustomerView.html'
      //styleUrls: ['./app.component.css']
    })
    export class CustomerComponent {
      title = 'custApp';
      CustomerModel:Customer =new Customer();
      CustomerModels:Array<Customer> = new Array<Customer>();
      Add(){
    this.CustomerModels.push(this.CustomerModel);
    this.CustomerModel = new Customer(); //clear Ui
      }
    }
 

CustomerModule.ts —

     import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { CustomerComponent } from './CustomerApp.CustomerComponent';
    import {FormsModule} from "@angular/forms";
    @NgModule({
      declarations: [
         CustomerComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        CommonModule,FormsModule
      ],
      providers: [],
      bootstrap: [CustomerComponent]
    })
    export class CustomerModule { }
 

main.ts

     import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { MainModule } from './CustomerApp/Home/CustomerApp.MainModule';
    import { environment } from './environments/environment';
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformBrowserDynamic().bootstrapModule(MainModule)
      .catch(err => console.log(err));
 

CustomerView.html

 Customer Code:
 

 <input [(ngModel)] ="CustomerModel.CustomerCode" type="text"/><br/>
    Customer Name: <input [(ngModel)] ="CustomerModel.CustomerName"  type ="text"/><br/>
    Customer Amount: <input [(ngModel)] ="CustomerModel.CustomerAmount"  type="number"/><br/>
    <input (click) = "Add()" type =button value="Add"/><br/>
    
    {{CustomerModel.CustomerCode}}<br/>
    {{CustomerModel.CustomerName}}<br/>
    {{CustomerModel.CustomerAmount}}<br/>
    
    <table>
        <tr>
            <td>Customer Code</td>
            <td>Customer Name</td>
            <td>Customer Amount</td>
        </tr>
        <tr *ngFor ="let cust of CustomerModels">
            <td>{{cust.CustomerCode}}</td>
            <td>{{cust.CustomerName}}</td>
            <td>{{cust.CustomerAmount}}</td>
        </tr>
    </table>
 

модель.ts

     export class Customer{
        CustomerCode:string="";
        CustomerName:string="";
        CustomerAmount:number=0;
    }

 

Структура папок проекта приведена ниже —

Снимок экрана с ошибкой —

— РЕДАКТИРОВАТЬ — Добавлены другие 2 файла module.ts —

CustomerApp.MainModule.ts

     import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MasterPageComponent } from './CustomerApp.MasterPageComponent';
    import { HomeComponent } from './CustomerApp.HomeComponent';
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    @NgModule({
      declarations: [
          MasterPageComponent,
          HomeComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        BrowserModule
      ],
      providers: [],
      bootstrap: [MasterPageComponent]
    })
    export class MainModule { }
 

CustomerApp.SupplierModule.ts

 
    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { SupplierComponent } from './CustomerApp.SupplierComponent';
    //import { SupplierRoutes } from '../Routing/CustomerApp.SuplierRouting';
    
    @NgModule({
      declarations: [
          SupplierComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        CommonModule
      ],
      providers: [],
      bootstrap: [SupplierComponent]
    })
    export class SupplierModule { }

 

1. Вы не хотите импортировать модули в свой компонент.

Поэтому удалите это из компонента:

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

2. Убедитесь, что модуль CustomerModule импортирован в ваш модуль приложения.

Дайте мне знать, если это поможет.

Возможно, немного поздно, но, надеюсь, это поможет другим.

Во-первых, вы должны импортировать FormsModule в app.module.ts — import { FormsModule } from "@angular/forms"

Во-вторых, используйте FormsModule следующим образом:

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