错误类型错误：无法读取未定义的属性“formData”

Question

1. 这是我在 chrome 中遇到的错误：

UserComponent.html:7 错误类型错误：无法读取未定义的属性“formData” 在 Object.eval [as updateDirectives] (UserComponent.html:7) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:23911) 在 checkAndUpdateView (core.js:23307) 在 callViewAction (core.js:23548) 在 execComponentViewsAction (core.js:23490) 在 checkAndUpdateView (core.js:23313) 在 callViewAction (core.js:23548) 在 execComponentViewsAction (core.js:23490) 在 checkAndUpdateView (core.js:23313) 在 callViewAction (core.js:23548)

我正在尝试使用 ngForm 进行 2 路数据绑定。

User.model.ts:

export class User {

 Id: number;
    UserName: string;
    FullName: string;
    MultipleRoles: string;
    Status: string;
    CreateDate: Date;
    CreateBy: string;
}

User.service.ts:

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})

export class UserService {
  formData: User;
  constructor() { }
}

user.component.html

<form #form = "ngForm">
  <div class="form-group">
    <label> USERNAME</label>
    <input name="UserName" #UserName="ngModel" [(ngModel)]="UserService.formData.UserName" class="form-control">
  </div>

  <div class="form-group">
      <label> FULLNAME</label>
      <input name="FullName" #FullName="ngModel" [(ngModel)]="UserService.formData.FullName" class="form-control">
    </div>

      <div class="form-group">
          <label> MULTIPLE ROLES</label>
          <input name="MultipleRoles" #MultipleRoles="ngModel" [(ngModel)]="UserService.formData.MultiplesRoles" class="form-control">
        </div>

        <div class="form-group">
            <label> STATUS</label>
            <input name="Status" #Status="ngModel" [(ngModel)]="UserService.formData.Status" class="form-control">
          </div>

  <div class ="form-row">
    <div class="form-group col-md-6">
              <label> Create Date</label>
              <input name="CreateDate" #CreateDate="ngModel" [(ngModel)]="UserService.formData.CreateDate" class="form-control">
            </div>

            <div class="form-group col-md-6">
                <label> Create By</label>
                <input name="CreateBy" #CreateBy="ngModel" [(ngModel)]="UserService.formData.CreateBy" class="form-control">
              </div>

    </div>
  <div class="form-group">
    <input type="button" value="SUBMIT" class="btn btn-lg btn-block">
  </div>
  </form>

user.component.ts:

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

import { UserService } from 'src/app/shared/user.service';
import { FormsModule} from '@angular/forms';
import { FormGroup, FormControl} from '@angular/forms';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  // constructor created to use user service class
  constructor( private service: UserService) { }

  ngOnInit() {
  }

}

app.module.ts

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

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { UserComponent } from './users/user/user.component';


import { UserListComponent } from './users/user-list/user-list.component';
import { UserService } from './shared/user.service';
import { FormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
    UserComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我真的是 angular7 的新手，并试图创建一个用户表单。非常感谢任何帮助。

Answer 1

用 this

更新 user.component.ts 中的构造函数

constructor(
  public UserService: UserService
) { }

Answer 2

在UserService 中创建一个这样的实例：

formData = new User();

并在UserService 添加私有访问修饰符：

             \/\/\/
constructor(private UserService: UserService) {
  // code
}

Working_Demo