时间戳

首页 > 解决方案 > 无法读取未定义的 UsersReportingComponent.html 的属性“id”

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

问题描述

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);
      });
    }
  }
}

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

错误类型错误：无法读取
Object.eval [as updateDirectives] (UsersReportingComponent.html:53) 处未定义的
属性'id' 在 object.debugUpdateDirectives
at checkAndUpdateView
at callViewAction
at execComponentViewsAction
at checkAndUpdateView
at callViewAction
at execEmbeddedViewsAction
at checkAndUpdateView
at callViewAction

标签： angular

解决方案

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

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

另一种选择是简单地初始化一些默认值，例如对象的''for直到解决：stringusergetter()

user: User = {
  id: 42,
  name: '',
  email: '',
  // ... remaining properties
}

另外，你确定你使用getter()正确吗？假设您的电话类似于以下内容：

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

你会像这样消费：

ngOnInit() {
  this._userService.getter().subcribe(user => this.user = user);
}

希望这会有所帮助！

推荐阅读