Angular 無法讀取未定義的屬性（讀取“用戶名”）

Question

我正在嘗試實現“創建”function 來創建約會，並且我還添加了創建約會的用戶 ID，所以我創建了“集合點”和“用戶”的 model，但是當我在控制台執行項目時顯示core.mjs:7643 錯誤類型錯誤：無法在 CreateRendezvousComponent_Template (create-rendezvous.component.html:45:9) 在 executeTemplate (core.mjs:12114:9) refreshView (core.mjs:11977:13) 在 refreshComponent (core.mjs:13073:13) 在 refreshChildComponents (core.mjs:11767:9) 在 refreshView (core.mjs:12027:13) 在 refreshComponent (core.mjs: 13073:13) 在 refreshChildComponents (core.mjs:11767:9) 在 refreshView (core.mjs:12027:13) 在 refreshEmbeddedViews (core.mjs:13027:17)

錯誤來自“create-rendezvous”組件的 HTML

        <label>Etat</label>
        <input type="text" class="form-control" id="etat"
        [(ngModel)]= "rendezvous.etat" name="etat">
    </div>
   <div class="form-group">
        <label>user id</label>
        <input type="number" class="form-control" id="user.id"
        [(ngModel)]= "rendezvous.user.id" name="user.id">
    </div>
     <button class="btn btn-success" type="submit">Ajouter</button>

</form>

</div>

這是我在“create-rendezvous”組件中的“Create”function

saveRendezVous(){
    this.rendezvousService.createRendezvous(this.rendezvous).subscribe(data=>{
         console.log(data);
         this.goToRendezvousList();
        
    }, 
    error=>console.log(error));
  }

這是我在 angular 服務中的 function

createRendezvous(rendezvous:Rendezvous): Observable<Object>{
    return this.httpClient.post(`${this.baseUrl}`, rendezvous);

  }

i appreciate your help.

Answer 1

import { User } from "./user";

export class Rendezvous {
    idRdv!:number;
    nom_client!: String;
    prenom_client!: String;
    commentaire!: String;
    numtel!: number;
    date_rdv!: Date;
    etat!: Boolean;
    user!:User;
}

export class User {
    id!:number;
    username!:String;
    email!:String;
    password!: String;

}

這些是我的模型，我使用的是 spring 2.7 和 angular 14。

Answer 2

undefined 意味着您試圖調用尚未初始化的 object 的id屬性。 驗證不僅您的集合點 object 已定義和初始化，而且它的用戶 object 也已初始化。

同樣驗證用戶 object 本身是否已定義。 如果它只是在某種 API 調用以加載數據之后才定義的，那么添加某種加載 state