Question

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

UserComponent.html：7错误TypeError：无法读取未定义的属性'formData' 在Object.eval [作为updateDirectives]（UserComponent.html：7）在Object.debugUpdateDirectives [作为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

使用此

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

constructor(
  public UserService: UserService
) { }

Answer 2

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

formData = new User();

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

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

Working_Demo

错误TypeError：无法读取未定义的属性'formData'

2 个答案: