我如何解决无法读取未定义的属性 'prenom' 错误？

Question

我正在开发一个用户注册页面，我在前端使用 angular 并在背面使用 spring 引导端，我遇到的问题是在启动我的应用程序时出现此错误：

这是我的用户 class :

export class User {

   constructor (

    IDENTIFIANT: Number,
    EMPLOI: Number,
    ENTITE: Number,
    LOGIN: string,
    MOTDEPASSE: string,
    NOM: string,
    PRENOM: string,
    STATUT: string,
    DATEEFFET: Date,
    DATEFIN: Date,
    CREELE: Date,
    CREEPAR: Date,
    MOTIFDEDESACTIVATION: string,
    ANNULEPAR: number,
    ANNULELE: Date,
    EMAIL: string,
    CONFIRMATIONMOTDEPASSE: string
   ){}
}

这是我的 component.html :

<div class="inscription">

    <!-- Default form register -->
    <form class="text-center border border-light p-5">

        <p class="h4 mb-4">Sign up</p>

        <div class="form-row mb-4">
            <div class="col">
                <!-- First name -->
                <input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">
            </div>
            <div class="col">
                <!-- Last name -->
                <input type="text" id="nom" class="form-control" [(ngModel)]="user.nom" placeholder="Votre nom">
            </div>
        </div>

        <!-- E-mail -->
        <input type="email" id="email" class="form-control mb-4" [(ngModel)]="user.email" placeholder="Votre email">


        <!-- Login -->
        <input type="text" id="login" class="form-control mb-4" [(ngModel)]="user.login" placeholder="Votre login">

        <!-- Password -->
        <input type="password" id="password" class="form-control" [(ngModel)]="user.motdepasse" placeholder="Votre mot de passe"
            aria-describedby="defaultRegisterFormPasswordHelpBlock">


        <!-- Confirmation mot de passe -->
        <input type="password" id="password-confirmation" class="form-control"
            placeholder="Confirmez votre mot de passe" [(ngModel)]="user.confirmationmotdepasse" aria-describedby="defaultRegisterFormPasswordHelpBlock">


        <!-- Entite -->

            <select class="form-control" id="entite" [(ngModel)]="user.entite">
                <option value="" selected disabled>Votre entité</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

        <!-- Emploi -->


        <select class="form-control" id="emploi" [(ngModel)]="user.emploi">
            <option value="" selected disabled >Votre emploi</option>
            <ul class="list-unstyled navbar-list">

                <li *ngFor="let tempAllEmploi of allEmploi">

                    <option>{{ tempAllEmploi.NOM}}</option>
                </li>
            </ul>


        </select>


        <!-- Sign up button -->
        <button mdbBtn color="info" block="true" class="my-4" type="submit" id="btn-inscription" class="btn-primary btn-lg" (click)="inscriptionts()">Valider</button>


    </form>
    <!-- Default form register -->

</div>

更多关注此代码：

<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">

你可以在这里看到我创建了用户 class，它有一个 "first name" 变量，并且我在我的 html 代码中使用了带有 user.prenom 的 ngModel，所以我看不出错误来自哪里：/

这是我的 component.ts :

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/model/user';
import { RestapiService } from 'src/app/restapi.service';
import { Emploi } from 'src/app/model/emploi';

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

  allEmploi: Emploi[];
  user: any;
  //user: Users= new Users(0,0,0,"","","","","",new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),"",0,new Date("dd-mm-yyyy"),"","");


  constructor(private Userservice: RestapiService) { }

  ngOnInit(): void {

    this.getAllEmploi();
  }

  public getAllEmploi(){

    this.Userservice.getEmploi().subscribe(

      data => {
        this.allEmploi=data;
      }
    );
  }


  public inscriptionts(){

    let resp=this.Userservice.inscription(this.user);
    resp.subscribe((data)=> this.user=data);
  }
}

这是我的服务:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Emploi } from './model/emploi';
import { Observable } from 'rxjs';

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

  url_getAllEmploi="http://localhost:8484/emploi/getall";

  constructor(private http:HttpClient) { }

  public inscription(user) {

    return this.http.post("http://localhost:8484/addUser", user);
  }


  public getEmploi(): Observable<Emploi[]> {

    return this.http.get<Emploi[]>(this.url_getAllEmploi);
  }


  public login(username:string, password:string) {
    const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)})
    return this.http.get("http://localhost:8484/", {headers, responseType:'text' as 'json'});
  }

  public getUsers() {
    let username="hr";
    let password="hr";
    const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)});
    return this.http.get("http://localhost:8484/getUsers", {headers});
  }
}

有人可以帮我吗？

Answer 1

对象属性区分大小写。所以它们应该像 user.PRENOM、user.NOM 等那样被访问。

此外，user 是一个异步变量，您在模板中访问它时可能不会对其进行初始化。您可以使用 *ngIf check

将表单包装在容器中

<div *ngIf="user" class="inscription">
  ...
</div>

Answer 2

您正在将表单字段绑定到未定义的对象（用户）。您需要在 ngOnInit() 中初始化用户。如果您的 class 中没有任何功能，您可以简单地使用接口。

export interface User {
    identifiant: Number,
    emploi: Number,
    entite: Number,
    login: string,
    motdepasse: string,
    nom: string,
    prenom: string,
    statut: string,
    dateeffet: Date,
    datefin: Date,
    creele: Date,
    creepar: string,
    motifdedesactivation: string,
    annulepar: number,
    annulele: Date,
    email: string,
    confirmationmotdepasse: string
}

然后

export class InscriptionComponent implements OnInit {

  allEmploi: Emploi[];
  user: User;

  ngOnInit(): void {
    this.getAllEmploi();
    this.user = {
        identifiant: null,
        emploi: null,
        entite: null,
        login: "",
        motdepasse: "",
        nom: "",
        prenom: "",
        statut: "",
        dateeffet: null,
        datefin: null,
        creele: null,
        creepar: "",
        motifdedesactivation: "",
        annulepar: null,
        annulele: null,
        email: "",
        confirmationmotdepasse: ""
  }
}

还要注意在表单中使用 [(ngModel)]。您需要像这样设置控件的名称属性

<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" name="prenom" placeholder="Votre prenom">

我如何解决无法读取未定义的属性 'prenom' 错误？

how i can resolve the error Cannot read property 'prenom' of undefined?

typescript

angular

angular-forms

我如何解决无法读取未定义的 属性 'prenom' 错误？

how i can resolve the error Cannot read property 'prenom' of undefined?

typescript

angular

angular-forms

我如何解决无法读取未定义的属性 'prenom' 错误？