Angular::ERRORTypeError：無法讀取未定義的屬性（正在讀取“電子郵件”）

我正在使用包含電子郵件和密碼的表單嘗試發布請求，并將其發送到后端以驗證來自后端（Spring Boot）的用戶，并使用來自后端的 JSON 將用戶的全部資料回傳到角度，以便可以進一步傳遞。但是我在嘗試使用 NgSubmit 獲取資料時遇到了上述問題。即使在控制器中，我也會得到空值。

角度版本：13.3.7

打字機版本：4.6.4

login.component.html

    <form class="container my-5" (ngSubmit)="loginUser()">
  <div class="form-group my-3">
    <label for="exampleInputEmail1" class="my-2">Email address</label>
    <!-- In input ngModel "? and !" is used to prevent undefinied error -->
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      placeholder="Enter email"
      name="email"
      [(ngModel)]="userDO?.loginDO.email"
    />
    <small id="emailHelp" class="form-text text-muted"
      >We'll never share your email with anyone else.</small
    >
  </div>
  <div class="form-group my-3">
    <label for="exampleInputPassword1" class="my-2">Password</label>
    <input
      type="password"
      class="form-control"
      id="exampleInputPassword1"
      placeholder="Password"
      name="password"
      [(ngModel)]="userDO?.loginDO.password"
    />
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-primary my-3 mx-5">Submit</button>
    <button type="button" class="btn btn-warning">Forget Password?</button>
  </div>
  <div class="dropdown-divider "></div>
  <a class="dropdown-item" routerLink="signup">New around here? Sign up</a>
</form>

登錄組件.ts

import { Component, OnInit } from '@angular/core';
import { CreateUser } from 'src/app/CreateUser';
import { LoginService } from 'src/app/service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // @ts-ignore: Object is possibly 'null'.
  userDO!: CreateUser = new CreateUser();
  constructor(private postRequest : LoginService) { 
  }
  loginUser()
  {
    console.log("Login component");
    console.log(this.userDO);
    this.userDO = this.postRequest.fetchUser(this.userDO);
  }
  ngOnInit(): void {
  }

}

創建用戶.ts

import { LoginUser } from "./LoginUser";

export class CreateUser {
    firstName!: string;
    lastName!: string;
    birthdayDate!: string;
    gender!:  string;
    country!: string;
    phoneNumber!: string;
    loginDO !: LoginUser;
}

登錄用戶.ts

export class LoginUser {
    email!: string;
    password!: string;
}

登錄服務.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CreateUser } from '../CreateUser';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  user : CreateUser = new CreateUser();
  private baseUrl:string = "http://localhost:8080";
  constructor(private http:HttpClient) {
  }

  fetchUser(userData: CreateUser) : CreateUser
  {
    console.log("Login service");
      this.http.post<CreateUser>(`${this.baseUrl}/login`, userData).subscribe((data: any) => {
      this.user = data;
      });
      return this.user;
    }
}

請檢查以下鏈接以獲取我在控制臺中輸入的錯誤影像在 此處輸入影像描述

uj5u.com熱心網友回復：

在您的類createUser的屬性中，您還有另一個類loginUser。在創建createUser期間，您不會使用new LoginUser()

在您的createUser類中，您需要在執行此操作的位置添加一個建構式。

標籤：有角度的 打字稿 弹簧靴

上一篇：Laravel有沒有辦法基于兩列來建立關系belongsTo？

下一篇：如何獲取在mysql上僅具有“已放置”狀態的每個不同ID的最后一行