Question

我正在尝试创建一个Angular表单，并希望插入由Angular形式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);
  }
}

这是服务 formDataUsersDetail

中引用的我的users-detail.service.ts 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';

和应用程序模块中的导入[]

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

这是我的用户详细资料文件夹。包含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控制台上出现错误

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

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

Answer 1

这不是它的工作方式。您不能在视图template / component.html上直接设置对服务的引用。

在component.html上，您只需要从所有输入的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()方法的参数。

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

1 个答案: