Question

我尝试使用Angular呈现个人资料网页。这是我的个人资料组件：

export class ProfileComponent implements OnInit {

  currentUser : User;
  userVisited : User;

  constructor(public _userService:UserService, private  router:Router, private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if(this.currentUser == null){
      this.router.navigate(['/']);
    }
    this.activatedRoute.params.subscribe((params: Params) => {
      this._userService.getUser(params['userId']).subscribe(res => {
        console.log (res);
        if(res.success){
          this.userVisited = res.user;
          console.log(this.userVisited.firstName);
        }
      });
    });
  }

}

现在，我尝试渲染<h1>{{userVisited.firstName}} {{userVisited.lastName}}</h1>。但它首先在控制台错误中给我：

TypeError: Cannot read property 'firstName' of undefined

然后，它仍然呈现正确的firstName和lastName，因为看起来这些错误在它通过Init函数之前就被打印出来了。

关于如何避免这些错误的任何想法？

Answer 1

在HTML中为正在加载的变量添加?运算符，这样：

<h1>{{userVisited?.firstName}} {{userVisited?.lastName}}</h1>

因此，在userVisited有值之前，它不会尝试访问嵌套属性。

Answer 2

在userVisited具有数据

之后，您可以在h1标记中使用* ngIf来呈现数据

<h1 *ngIf="userVisited">{{userVisited.firstName}} {{userVisited.lastName}}</h1>

在我初始化变量之前尝试渲染错误？

2 个答案: