Question

users.reporting.component.html：

<div class="container"

    <form (ngSubmit)="processForm()">

        <div class="form group" >
            <label for="id">Id</label>
            <input type="text" name="id" class="form-control" [(ngModel)]="user.id">
        </div>
        <div class="form group">
            <label for="name">Full Name</label>
            <input type="text" name="name" class="form-control" [(ngModel)]="user.name">
        </div>

        <div class="form group">
            <label for="email">Email</label>
            <input type="email" name="email" class="form-control" [(ngModel)]="user.email">
        </div>
        <div class="form group">
            <label for="date">Joining Date</label>
            <input type="date" name="date" class="form-control" [(ngModel)]="user.date">
        </div>
        <div class="form group">
            <label for="address">Addrress</label>
            <input type="text" name="address" class="form-control" [(ngModel)]="user.address">
        </div>

        <div class="form group">
            <label for="status">Status</label>
            <input type="text" name="status" class="form-control" [(ngModel)]="user.status">
        </div>

        <input type="submit" value="save" class="btn btn-success">
    </form>
</div>

users.reporting.component.ts：

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/user';
import { UserService } from 'src/app/shared_service/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-users-reporting',
  templateUrl: './users-reporting.component.html',
  styleUrls: ['./users-reporting.component.css']
})
export class UsersReportingComponent implements OnInit {      
  private user: User;

  constructor(private _userService: UserService, private _router: Router) { }

  ngOnInit() {
    this.user = this._userService.getter();            
  }
  processForm() {
    if (this.user.id == undefined) {
      this._userService.createUser(this.user).subscribe((user) => {
        console.log(user);
        this._router.navigate(['/user-listing']);
      }, (error) => {
        console.log(error);
      });
    } else {
      this._userService.updateUser(this.user).subscribe((user) => {
        console.log(user);
        this._router.navigate(['/user-listing']);
      }, (error) => {
        console.log(error);
      });
    }
  }
}

请帮助我...我的项目中有错误，错误是这样的：

ERROR TypeError：无法读取未定义的属性'id'
      at Object.eval [作为updateDirectives]（UsersReportingComponent.html：53）
          在Object.debugUpdateDirectives
          在checkAndUpdateView
          在callViewAction
          在execComponentViewsAction
          在checkAndUpdateView
          在callViewAction
          在execEmbeddedViewsAction
          在checkAndUpdateView
          在callViewAction上

Answer 1

您从未设置user：

export class UsersReportingComponent implements OnInit {
   user: User = new User();

  //...
}

请确保在ngOnInit之前通过在构造函数中或直接在字段上进行设置来初始化您的类字段，或者使用?.模板内的[(ngModel)]="user?.id"保存导航运算符： >

也如注释中所述，请勿将用户字段设置为private，否则AOT编译将失败

Answer 2

在我看来，您必须更改此设置：

private user: User;

对此：

public user: User;

私有属性仅在类内部可用，而模板在外部。

Answer 3

您似乎正在使用user中的this._userService.getter();来检索ngOnInit()数据。您可以使用*ngIf来测试user在呈现表单之前是否已加载，以避免此错误：

<form (ngSubmit)="processForm()" *ngIf="user">
// ...
</form>

另一种选择是简单地为''对象初始化一些默认值，例如{{1}的string，直到user解决：

getter()

还可以确定您正确使用了user: User = { id: 42, name: '', email: '', // ... remaining properties }吗？假设您的通话类似：

getter()

您会像这样食用

getter()
  return this.http.get<User>('/some/api/url')
}

希望有帮助！

无法读取未定义的UsersReportingComponent.html的属性“ id”

3 个答案: