Angular 5内联ngIf语句逻辑异常问题求助

嗨，我来帮你捋清楚这个问题～你遇到的其实是逻辑运算符使用错误导致的小bug，我给你拆解一下：

原条件的逻辑漏洞 #

你写的判断条件是：

<button *ngIf="item?.fields?.assetType !== 'tool' || item?.fields?.assetType !== 'questions'">NEXT</button>

这个条件的逻辑是「当assetType不等于'tool' 或者 不等于'questions'时，显示按钮」，但这里存在致命矛盾：

• 当assetType是'questions'时，item?.fields?.assetType !== 'tool'这个判断是true（因为确实不等于'tool'），所以整个||运算的结果就是true，按钮会照常显示，完全违背了你的需求。
• 本质上，不管assetType是什么值，这两个判断里总有一个为true，所以按钮几乎永远不会被隐藏（除非assetType同时是'tool'和'questions'，这显然不可能）。

正确的条件写法 #

你的核心需求是：当assetType是'tool'或'questions'时隐藏按钮，反过来就是当assetType既不是'tool'也不是'questions'时显示按钮。所以需要把||换成&&：

<button *ngIf="item?.fields?.assetType !== 'tool' && item?.fields?.assetType !== 'questions'">NEXT</button>

如果以后需要判断的类型更多，推荐更简洁易维护的写法：

<button *ngIf="!['tool', 'questions'].includes(item?.fields?.assetType)">NEXT</button>

这个写法用数组的includes方法判断assetType是否在目标列表中，再取反，逻辑更直观，后续加新类型直接往数组里加就行。

内容的提问来源于stack exchange，提问作者Smokey Dawson