如何在角度模板中使用 localStorage？答案

【问题标题】：how to use localStorage in angular template?如何在角度模板中使用 localStorage？
【发布时间】：2021-09-25 15:20:39
【问题描述】：

我在网站上使用 localStorage，但无法让 * ngif 以我想要的方式工作。

说明：当用户标识自己时，他的信息通过变量'identity'保存在localStorage中。我想在“身份”变量存在时显示一些按钮，而在不存在时显示其他按钮。但它总是向我显示相同的变量，无论该变量是否存在于 localStorage 中。我怀疑错误出在模板中以及我如何使用条件中。虽然也可能是我在另一个文件中遗漏了一些附加功能，但我不知道。

它工作正常（在控制台中我看到它如何保存用户信息），但是当我想在条件指令中使用它的信息时，它就不能正常工作了。

我的代码：

app.component.ts

export class AppComponent {
  public identity:any;

  constructor(
    private _userService:UserService
  ){}

  ngOnInit(){
    this.identity = this._userService.getIdentity();;
  }

}

getIdentity()

 getIdentity(){
    this.identity = JSON.parse(localStorage.getItem('identity')|| '{}');
        
    
    return this.identity;
  }

app.component.html

 <div *ngIf="identity ; else userloggedOut">

        <ul class="navbar-nav me-auto mb-2 mb-md-0">

        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>

      </ul>
    </div>

      <ng-template #userloggedOut >
      <ul class="navbar-nav navbar-right me-auto mb-2 mb-md-0">

      <li class="nav-item">
          <a class="nav-link" href="#">Identificarse</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Registrarse</a>
        </li>
      </ul>
      </ng-template>

【问题讨论】：

您的 if 条件似乎不正确。 If 永远不会是未定义的，它是一个或 (||)。删除那部分。
另外.. 如果您更改为 JSON.parse(localStorage.getItem('identity')|| null); 则不需要 stringify这样整个 if 块就可以走了，您可以简单地返回身份。
你是对的（它已经更正了），但这并不能解决我的问题。会是什么？
我确定这与我如何在 * ngif 中进行比较有关。当没有登录用户并且我执行 console.log(identity) 时，它会显示空键 { }

标签： html angular typescript local-storage

【解决方案1】：

请试试这个

*ngIf="identity || identity != {} ;

【讨论】：

谢谢，但它不起作用。与大括号比较不起作用，因为“身份”是一个对象。无论如何，我已经通过创建一个布尔函数来检查该对象的属性是否具有数据来解决它（不正确但它有效）。