Angular中如何用同一个isArchiveValid变量实现ngIf正反条件渲染？

你不需要额外定义取反的变量，直接复用现有isArchiveValid变量即可，Angular的*ngIf指令支持直接在表达式中对变量做取反运算。

逻辑梳理 #

你当前isArchiveValid的赋值逻辑是：当relatedTemplates.count为0时取值为true，代表当前Agent没有被模板占用、可以正常归档。你需要的两个视图判断对应逻辑如下：

• 展示「无法归档」提示：仅当不能归档（也就是isArchiveValid为false）时显示，所以判断写为*ngIf="!isArchiveValid"
• 显示归档按钮：仅当可以归档（也就是isArchiveValid为true）时显示，判断保持*ngIf="isArchiveValid"即可，不能归档时按钮会自动隐藏，完全符合你的需求。

修正后的模板代码 #

<!-- 无法归档提示，仅在isArchiveValid为false时显示 -->
<div class="row agent-form-row" *ngIf="!isArchiveValid">
    <div class="col-sm-10">
       <div class="text-danger">
            该Agent正被模板占用，无法执行归档操作
       </div>
   </div>
</div>
<!-- 归档按钮，仅在isArchiveValid为true时显示 -->
<button type="button" class="btn btn-primary" *ngIf="isArchiveValid"  (click)="onArchiveAgent()">Archive</button>

可选优化建议 #

如果觉得模板里取反的写法可读性不高，你可以把isArchiveValid重命名为更语义化的canArchive，不需要修改逻辑，只需要改变量名即可提升代码可读性，但这是可选操作，不需要额外新增变量。

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