Angular 2，如何将值存储在来自 ngOnInit() 的变量中？答案

【问题标题】：Angular 2, How to store value in variable from ngOnInit()?Angular 2，如何将值存储在来自 ngOnInit() 的变量中？
【发布时间】：2018-01-31 23:13:00
【问题描述】：

在这里，当我登录到我的应用程序时，我想获取存储在本地存储中的 json 对象，然后将其分配给用户对象。如果我第一次登录，它不会显示任何内容，但如果我刷新页面，我可以看到名字。

这里是 .ts 文件

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    user: Object;
    ngOnInit() {
    this.user = JSON.parse(localStorage.getItem('user'));
    }
}

在模板中我想这样使用它：

<p> {{ user.first_name }} </p>

我该如何解决这个问题？

【问题讨论】：

@Vega 没有。这是一个糟糕的建议
当前代码有什么问题？
用户对象里面是什么？您可以使用 {{user | 在 html 中查看它json}} 或者只是 console.log 它。
看来你的 sn-p 不完整。你是如何注入localStorage 的？贴一些更相关的代码
@dag sessionStorage 和 localStorage 全球可用...

标签： javascript angular typescript angular2-routing

【解决方案1】：

在设置变量之前，您的 html 正在呈现

在你的 html 中使用这个：

<p> {{ user?.first_name }} </p>

这称为安全导航运算符，它将防止错误并在填充 first_name 时呈现它。

【讨论】：

谢谢。但我的问题是如何在 html 渲染之前使用值设置变量，因为我想在我的模板中使用它的值。
因为这是一个绑定，所以当你的打字稿中的用户变量发生变化时，它会在你的模板中更新。所以最初，user 可能为空，<p> 中不会显示任何内容，但在您设置user 后它会更新。这似乎是正确的答案。

【解决方案2】：

经过适当的搜索，在这里找到了我的答案。

Angular2: How to load data before rendering the component?

@Wesley Coetzee，感谢您的支持。

【讨论】：