如何在 HTML 中不使用 NgIf 评估 Typescript 表达式？答案

【问题标题】：How do I evaluate Typescript expression without using NgIf in HTML?如何在 HTML 中不使用 NgIf 评估 Typescript 表达式？
【发布时间】：2020-06-16 05:39:11
【问题描述】：

我已经寻找了很多答案，我一直在使用 NgIf 并且我不想使用它，而是
我正在尝试使用 [hidden] 。所以请不要将此标记为重复或“不清楚”，它非常清楚（我之所以提到这一点是因为之前与一些“版主”的不愉快经历）。

我一直在努力使这项工作： [hidden]="vehicle.body==='sedan' "

这有效吗？如果不是，有人可以给我指点让它工作的正确方法吗？

我尝试在 TS 组件中创建 aT/F 变量，因为我确信像 [hidden]="isHidden" 这样的东西确实有效。但我想在 HTML 部分中评估表达式。

谢谢

【问题讨论】：

是的，[hidden]="vehicle.body === 'sedan'" 有效。如果您在控制台中看到错误，可以尝试使用vehicle?.body（safe navigation operator 将防止当vehicle 为undefined 或null 时发生的异常。
另外一点要考虑：hidden 就像设置display: none。因此，如果您使用 CSS 或样式绑定设置不同的 display 样式，它可能会阻止元素被隐藏。
发生的事情是该标签内还有另一个 ngif，所以我只是用 && 将我的条件添加到它而不是制作单独的 [hidden] 并且它起作用了

标签： html angular frontend

【解决方案1】：

使用 hidden 应该可以解决您的问题，但我认为您不应该使用它。

有两种方法可以隐藏 UI，

1) *ngIf -> 从 DOM 中移除元素， -- 安全

2) hidden/ng-class --> 它只是从 DOM 中隐藏元素，因此攻击者仍然可以通过简单地执行此操作来查看您的数据/ UI -- 不安全 p>

选择是你的。

编码愉快！

【讨论】：

【解决方案2】：

有两种方法可以根据条件隐藏元素。hide 属性从用户视图中隐藏元素，但它仍然存在于 dom 中。

  <input class="txt" type="text" [hidden]="isHidden">

*NgIf 对视图和 dom 都隐藏，因此使其成为更好的选择，但它完全取决于您的使用情况。

   <input class="txt" type="text *ngIf="!isHidden">

渲染后隐藏和显示元素是可以的但是使用 Angular，我们可以构建丰富的应用程序，一些组件可能会使用太多的资源。即使组件被隐藏，组件也会被附加到它的 DOM 元素上。它将继续监听事件。 Angular 不断检查与数据绑定相关的更改。即使隐藏，组件行为仍然存在。

组件及其子组件将占用资源。内存负担可能很高，从而导致性能下降。因此，向 HTML DOM 的组件元素添加或删除元素比隐藏或显示它们要好。

【讨论】：

【解决方案3】：

是的，它是有效的，尽管我建议在最后删除多余的空间。其他考虑因素是您将隐藏属性应用于哪个元素。例如对 div、按钮来说没问题，但如果您遇到特定类型控件特有的问题，则值得检查。

旁注：我知道你说你不想使用 *ngIf，但很好奇为什么。如果这是您不想影响布局的典型问题，您可以考虑使用 ng-container 结构指令，因为它不会影响 DOM。并且更适合为整个部分添加条件显示，以及任何控件，例如

<ng-container *ngIf="condition">content
</ng-container>

【讨论】：

发生的事情是该标签内还有另一个 ngif，所以我只是用 && 将我的条件添加到它而不是制作单独的 [hidden] 并且它起作用了