Javascript 角度更新表单填充输入字段，但仍在控制台中返回错误？

我正在尝试用Angular创建一个更新表单。我试过很多东西，但我一开始对Angular不是很熟悉。这看起来很简单，我使用

ngOnInit（）

方法获取数据（返回正确的数据）。用户数据显示在输入字段中，但随后出现错误

这是我在控制台中得到的错误：

UpdateComponent.html:6 ERROR TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateDirectives] (UpdateComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
    at checkAndUpdateView (core.js:11307)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)

我的

update.component.html

文件：

<div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
  </div>
  <div class="form-group">
    <label for="favoriteFood">What is your Favorite Food?</label>
    <input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
  </div>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
  </div>
  <div class="form-group">
    <label for="favoriteFood">What is your Favorite Food?</label>
    <input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
  </div>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

---

这是因为在用户数据中没有返回

firstName

。也许它没有定义。为了避免这个问题

---

你最好：1。如果返回用户数据，请检查

ngOnInit（）

中的用户数据。2.初始用户数据。e、 g:

user={firstName:''}3。检查从服务获取用户数据时是否有延迟，如果表单中有双向绑定，那么为什么需要在表单提交时传递用户。试着使用下面的方法

   <form (ngSubmit)="onUpdateSubmit()" novalidate>
    .
    .
    .

你的错误信息很清楚。您的用户会被
ngOnInit
上的api调用填充，但是，加载html后可能会返回响应。加载时，DOM希望用户使用可用的但在您的案例中未定义的。有几种方法可以解决这个问题。首先，按照通常的标准，在构造函数中定义用户，如下所示

constructor(
    private authService: AuthService,
    private validateService: ValidateService,
    private router: Router,
    private _flashMessagesService: FlashMessagesService
  ) { 

   this.user = <Object>{};
}

在上面的表单中，如果用户未定义，则不会加载表单，因此不需要user.name
 这是因为在用户数据中没有定义
firstName
。这是因为在加载页面时，
user
对象未初始化。如果在
ngOnInit
中没有分配给
此用户的对象，它将返回异常。
您可以通过两种方式解决此问题。
一种方法是在开始时初始化
this.user
对象。如果在
ngOnInit
中没有为用户对象分配对象，它将返回一个空白表单，但不会返回异常。定义对象或构造函数时，只需初始化
user
对象即可

constructor(
    private authService: AuthService,
    private validateService: ValidateService,
    private router: Router,
    private _flashMessagesService: FlashMessagesService
  ) { 

   this.user = <Object>{};
}

定义对象时

user={}

或者在构造函数中

this.user={}

第二种方法是，如果希望仅在有数据时显示表单，则可以使用
*ngIf
仅在
用户
对象中有数据时显示表单

<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>


编辑您的个人资料
........
.........
嘿，谢谢你的回复，所以我检查了数据，它是正确的：{u id:“5af80141f4a59c46e03f4471”，姓：“约翰”，姓：“Doe”，年龄：24岁，最喜欢的食物：“比萨饼”…}你对第二部分，初始用户数据是什么意思？我应该将firstName设置为空字符串吗？没关系，哇，谢谢，我完全明白了。非常感谢大家，最好是初始化用户对象以避免未定义的问题。但是关于你的问题。我想这是因为在获取用户数据表单
authService
时有时间延迟。哦，很好，谢谢！我会这样写的
this.user={}

<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>