Question

我是Angular的新手，但是我已经打了5个小时而无法解决这个问题：我无法从Angular4应用程序中的json请求中获取对象。我的服务中有以下功能：

   getById(id: number) {  
        return this.http.get('/api/users/' + id, this.jwt()).map((response: Response) => response.json());
    }

在我的组件中，我有：

export class EditUserComponent implements OnInit {
  appUser: User;
  id: number;
  private sub: any;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id']; ;
    });
      this.userService.getById(this.id).subscribe((appUser: User) => {
      this.appUser = appUser;
    });
  }
   constructor(private auth: AuthenticationService, private userService: 
UserService, private route: ActivatedRoute,
    private location: Location) {

  }
}

我在html视图上显示User类的属性，如{{appUser.firstName}}等。然后我得到ZoneAwareError：

   TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/EditUserComponent.ngfactory.js:37:34)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:4200/vendor.bundle.js:12856:21)
    at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12235:14)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12545:17)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12236:5)
    at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13218:42)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:12758:12)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:10327:63)
    at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:32148:42)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:31329:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:31310:26)
    at http://localhost:4200/vendor.bundle.js:31246:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:31246:29)

Answer 1

首次显示视图时，组件尚未检索到数据。这就是appUser未定义的原因。有几种方法可以防止此错误：

1）将appUser初始化为某种东西，以便它不是未定义的。这可能对您的应用程序的业务规则没有意义。

2）在视图的其中一个顶级HTML元素上添加*ngIf = "appUser"，例如<div>。这将阻止在检索数据之前显示视图。

3）在appUser上添加安全导航操作符，如下所示：{{appUser?.firstName}}此方法的主要问题是您需要将其添加到 {{>每个用法{{1} 1}}在你的页面上。

无法从json响应中获取对象

1 个答案: