我知道Angular中*ngIf和hidden属性之间的区别：
*ngIf：将元素添加/删除到DOM。
hidden：仅显示/隐藏DOM中的元素。
我不确定选择其中一个的正确条件（？）。在一个条件下删除一个元素然后再次添加它听起来有点昂贵，但同时，让它通过hidden属性保留在DOM中似乎并不正确。
我一直坚持使用*ngIf，但是即使更改了{{1}的条件后，当我尝试访问*ngIf模板中的元素时，有时也会出现错误}到*ngIf（可能是因为我不习惯DOM更新的周期）。在这种情况下，我使用true属性，不是因为它看起来正确。
因此，重点是，我想知道选择一个标准或标准的明确标准/标准。
非常感谢。
答案 0 :(得分：6)
我在Angular文档中找到了更好的答案。希望它将为您提供清晰的方法，以从*ngIf和hidden中找出更好的选择。
隐藏和删除之间的区别对于一个简单的而言无关紧要 段。主机元素何时连接到 资源密集型组件。此类组件的行为仍在继续 即使隐藏。组件保持附加到其DOM元素。它 一直在听事件。 Angular不断检查是否存在更改 可能会影响数据绑定。无论组件在做什么，它都会保持 做。
虽然是不可见的，但该组件及其所有后代 组件—占用资源。性能和内存负担可能是 实质性的响应能力会下降，用户看不到任何东西。
从正面看，再次显示该元素是很快的。的 组件的先前状态将保留并准备显示。的 组件不会重新初始化-这可能是昂贵的操作。 因此，隐藏和显示有时是正确的选择。
但是，在没有令人信服的理由让他们继续前进时，您的 首选项应该是删除用户看不到的DOM元素 并使用诸如
NgIf之类的结构指令来恢复未使用的资源这些相同的考虑因素适用于每个结构性指令，无论是否 内置或自定义。在应用结构性指令之前，您可能 想暂停片刻，以考虑添加和 删除元素以及创建和销毁组件。
答案 1 :(得分：3)
在两种情况下，我有理由选择一种：
*ngIf时选择[hidden]会导致性能问题（数百个隐藏标签仍在DOM中，并可能导致网站显示缓慢）。[hidden]，并将事件传递给它，除了这两个规则外，还取决于设置的感觉。
我给你一个我在现实生活中发现的每个人的例子：
*ngIf时选择[hidden]会导致性能问题假设您有一个Ticket对象，并且通过使用Log对象的列表来跟踪对每个票证的修改。每个日志代表需要以不同方式呈现的更改类型（例如：关闭故障单将生成显示旧状态和新状态的日志，但是将文件添加到故障单中则显示文件的预览）。
一种可能的实现方式是像这样使用[hidden]：
<span [hidden]="logType !== 1">...</span>
<span [hidden]="logType !== 2">...</span>
<span [hidden]="logType !== 3">...</span>
...
<span [hidden]="logType !== 30">...</span>
然后，对于页面中的每个日志，您将拥有29个隐藏的DOM元素。现在，如果您对票证进行了很多修改，比如说进行10次修改，您最终将在DOM中包含290个隐藏元素，这将占用内存，并且渲染速度较慢。
在这种情况下，将[hidden]更改为*ngIf会完全删除290个多余的对象。
[hidden] 检查其他情况：
Ticket.html
<ng-container *ngIf="numLogs > 0">
<h1>Logs</h1>
<ticket-logs [ticketId]="ticket.id"
(onNumLogsRetrieved)="setNumLogs($event)"></ticket-logs>
</ng-container>
其中setNumLogs($event)是设置numLogs的值的地方。
请注意，使用*ngIf的{{1}}组件将永远不会被实例化，因此ticket-logs将始终为numLogs。在这种情况下，您需要使用0，它使[hidden]组件有机会调用ticket-logs来隐藏setNumLogs及其本身。
（请注意，在这种情况下，我们将无法h1隐藏其自身的内容，因为我们仍将显示ticket-logs标签。）
答案 2 :(得分：0)
* ngIf用于希望基于条件动态插入DOM元素时使用。 使用hidden属性，您将始终有DOM元素存在，您可以随时从DOM中获取它，但是对用户而言（显然）它是不可见的。
因此，当您根本不希望元素出现在DOM中时，请使用* ngIf。 当您要存储一些数据时（可能是出于发布目的，使用可见的表单元素）并需要出于某种原因需要对其进行访问，请使用隐藏元素。
答案 3 :(得分：0)
ngIf 是Angular提供的指令。它用于在角度应用程序中添加或删除html内容。如果我们提供的是假，它将删除内容。
例如
<div *ngIf="isValid"> Data is valid. </div>
隐藏来隐藏页面中的内容。它不会删除DOM元素。但这只是隐藏
例如
<div hidden> Data is valid. </div>
何时应使用* ngIf？
在应删除特定用户格式的某些字段时可以使用它。然后，您可以使用* ngIf。因为任何人都可以通过删除dom中的隐藏内容来使DOM元素可见。因此，如果在特定条件下任何人都不应使用该字段，则最好使用* ngIf