无法读取未定义的属性''

Question

我正在尝试创建一个Angular表单，并希望插入由angular form sqlServer采用的数据。当我提供Angular获取错误

“无法读取属性'UserName'的已定义”“无法读取已定义的属性'UserSurname'和所有其他形式。

这是我的users-detail.service.tsı有formData：UsersDetail

import { Injectable } from '@angular/core';
import { UsersDetail } from './users-detail.model';
import {HttpClient} from "@angular/common/http";

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

  formData:UsersDetail

  readonly rootURL = 'https://localhost:51128/api'

  constructor(private http:HttpClient) { }


  postPaymentDetail(formData:UsersDetail){
    return this.http.post(this.rootURL+'/Users',formData);
  }
}

这是我的users-detail.service.ts在服务formDataUsersDetail中引用的UsersDetailClass

    export class UsersDetail {

    UserId :number;
    UserName :string;
    UserSurname :string;
    UserEmail :string;
    UserPassword :string;
    UserTypeId :number;
}

我有一个共享文件夹包含那些2 ts。

在appModule.ts我有

import { UsersDetailService } from './shared/users-detail.service';

并在app模块中导入[]

  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [UsersDetailService],

这是我的users-detail文件夹。包含users-detail.component.ts和users-detail.component.html

users-detail.component.ts我有

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UsersDetailService } from 'src/app/shared/users-detail.service';

@Component({
  selector: 'app-users-detail',
  templateUrl: './users-detail.component.html',
  styles:[]
})
export class UsersDetailComponent implements OnInit {

  constructor(private service:UsersDetailService) {}

最后是users-detail.component.html我有

<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
  <input type="hidden" name="UserId" [value]="service.formData.UserId">
  <input type="hidden" name="UserTypeId" [value]="service.formData.UserTypeId">

  <div class="form-group">
    <input name="UserName" #UserName="ngModel" [(ngModel)]="service.formData.UserName" 
    class="form-control" placeholder="UserName" required="">
  </div>

  <div class="form-group">
      <input name="UserSurname" #UserSurname="ngModel" [(ngModel)]="service.formData.UserSurname" 
      class="form-control" placeholder="UserSurname" required>
    </div>

    <div class="form-group">
        <input name="UserEmail" #UserEmal="ngModel" [(ngModel)]="service.formData.UserEmail" 
        class="form-control" placeholder="UserEmail" required>
      </div>

      <div class="form-group">
          <input name="UserPassword" #UserPassword="ngModel" [(ngModel)]="service.formData.UserPassword" 
          class="form-control" placeholder="UserPassword" required>
        </div>
        <div class="form-group">
          <button class="btn btn-success btn-lg btn-block" type="submit" [disabled]="form.invalid">Submit</button>
        </div>
</form>

当我服务角度我没有得到编译错误。我在chrome console上遇到错误

“无法读取已定义的属性'UserName'”。

找不到问题。有人可以帮忙吗？

Answer 1

这不是它的工作原理。您无法在视图模板/ component.html上直接设置对服务的引用。

在component.html上，您只需要从ALL输入中的service.和ngModel属性中删除前缀value，因为formData是在组件上定义的属性。

<input type="hidden" name="UserId" [value]="formData?.UserId">
<input type="hidden" name="UserTypeId" [value]="formData?.UserTypeId">

<div class="form-group">
  <input name="UserName" [(ngModel)]="formData?.UserName" class="form-control" placeholder="UserName" required="">
</div>

<div class="form-group">
  <input name="UserSurname" [(ngModel)]="formData?.UserSurname" class="form-control" placeholder="UserSurname" required>
</div>

<div class="form-group">
  <input name="UserEmail" [(ngModel)]="formData?.UserEmail" class="form-control" placeholder="UserEmail" required>
</div>

<div class="form-group">
  <input name="UserPassword" [(ngModel)]="formData?.UserPassword" class="form-control" placeholder="UserPassword" required>
</div>

在您的user-detail.component.ts上，您可以做的是使用空对象初始化formData属性，或者使用默认值设置以下属性的对象（它可以是空字符串，或者是您的业务的任何内容）逻辑要求）。由于您已经定义了formData属性，因此实际上存储了表单中的所有数据，这要归功于2-way data binding。

export class UsersDetailComponent implements OnInit {

  formData: UsersDetail = undefined;

  constructor(private service:UsersDetailService) {}

  onSubmit() {
    console.log(this.formData);
    this.service.postPaymentDetail(this.formData).subscribe(response => {
      console.log(response);
    }) 
  }

}

当触发onSubmit（）方法时，您将formData传递给postPaymentDetail()方法的参数。