否定语句上的“ngIf”无法正常工作答案

【问题标题】：'ngIf ' on negative statement not working properly否定语句上的“ngIf”无法正常工作
【发布时间】：2021-06-20 20:23:05
【问题描述】：

早安，

尝试在 Angular 中使用 ngIF 时遇到问题，特别是当值必须为负时...

例如

我有这个 HTML 代码

<ul class="nav navbar-nav" *ngIf ="identity">
    <li>
      <a href="#">
        <span class="glyphicon glyphicon-home"></span>
        Inicio
      </a>
    </li>

    <li>
      <a href="#">
        <span class="glyphicon glyphicon-th-list"></span>
        Timeline
      </a>
    </li>

    <li>
      <a href="#">
        <span class="glyphicon glyphicon-user"></span>
        User
      </a>
    </li>

  </ul>

“身份”在登录时存储用户数据和令牌的位置，它可以正常工作，如下图所示

但是，当我在下一个 div 中使用 ngIf = "!identity" 时，当没有用户登录时，右上角会显示不同的图标，没有任何反应

<ul class="nav navbar-nav navbar-right" *ngIf ="!identity">
    <li>
      <a [routerLink]="['/login']" [routerLinkActive]="['active']">
        <span class="glyphicon glyphicon-log-in"></span>
        Login
      </a>
    </li>

    <li>
      <a [routerLink]="['/register']" [routerLinkActive]="['active']">
        <span class="glyphicon glyphicon-user"></span>
        Register
      </a>
    </li>

   </ul>

正如您在此处看到的，没有生成用户数据或令牌，但右上角的图标仍然没有显示

我已经尝试使用 <ng-template #anExample> 使用 ngIf else 语句并在其中添加第二个 div 并将其添加到 *ngIf ="identity; else anExample" 但它仍然不起作用。

提前感谢您的帮助

【问题讨论】：

没有用户登录时identity的值是多少？
@AlirezaAhmadi 拍摄！！！我忘了把它包括在我的问题中：这是函数 getIdentity(){ let identity = JSON.parse(localStorage.getItem('identity')||'{}');如果（身份！=“未定义”）{ this.identity =身份； }else{ this.identity= null; } 返回 this.identity; }
低代表，所以我必须添加答案而不是评论，但肯定会检查你是否被某些东西伪造了。取下 ngIf 并确保它显示（css / 格式问题），如果它在开发工具元素中但没有显示你知道它是别的东西。
嗨@Wild Bill 好吧...有趣的事情..当我使用这个 *ngIf ="!identity == false" 它显示左右图标所以我在这里的逻辑上苦苦挣扎因为如果虚假陈述否认身份中不存在值，这意味着身份应该包含正确的东西？我在 Firefox 和 chrome 中都尝试过隐身，但问题仍然存在
您正在返回/解析“{}”，在这些情况下它应该是一个空对象，所以这里有一些检查：stackoverflow.com/questions/37111005/…

标签： html angular angular-ng-if

【解决方案1】：

正如您在第二张图片中看到的，我们仍然看到 Inicio , Timeline and User，这意味着 identity 具有价值，因为您将其分配给了 {}。

identity 变量永远不会是 undefined，因为 {}。换句话说，如果identity 在localStorege 中不存在，则将其分配为空对象。这是你的函数，else part 从未执行过。

function getIdentity() {
    let temp  = localStorage.getItem('identity');
    let identity = temp != null ? JSON.parse(temp) : null;
    
    if (identity != null) 
        this.identity = identity; //always this executed
    else 
        this.identity = null;//never executed
    return this.identity;
}

您必须将JSON.parse(localStorage.getItem('identity')||'{}'); 更改为JSON.parse(localStorage.getItem('identity'));。

【讨论】：

谢谢@Alireza Ahmadi 我也是这么想的，但是如果我删除括号并尝试编译代码，我会收到此消息` Argument of type 'string | null' 不能分配给“字符串”类型的参数。类型“null”不能分配给类型“string”。 38 let identity = JSON.parse(localStorage.getItem('identity'));`我试图声明'identity: String;'并在构造函数中将其初始化为 'this.identity = 'String';'但它仍然给我同样的错误。感谢您的帮助
嗨 Alireza，我想我想通了，我会发布它来回答我自己的问题
@secaidadevstudent 我编辑我的代码。请检查

【解决方案2】：

我想我在这里找到了解决方案，在搜索了解决方案后，我发现这是False error "Type 'null' is not assignable" for Typescript code #1818 这里提到的一个TS错误所以基本上我们需要更改tsconfig.json并在"compilerOptions"下包含以下内容

"strictNullChecks": false,

就是这样，现在它工作正常...谢谢大家的帮助

【讨论】：

没有人说不是好办法。您不需要禁用检查 null
请查看this了解"strictNullChecks": false的缺点
谢谢兄弟...所以我将其更改为true 并且我的代码仍然可以正常工作，所以根据您的知识..将其设置为 false 的缺点是什么？
您将在编译时获得更多安全性，并避免您的应用中可能出现的一些问题
感谢大佬的帮助...我还在学习，所以如果遇到其他问题，我会发布它，也许我可以得到你的帮助干杯！