Typescript Angular ngIf reverse

Question

我有这个对象isArchiveValid，它是基于relatedTemplates的计数设置的。在我的视图中，我有一条要显示的消息，还有一个要隐藏的按钮。有没有一种方法可以同时使用同一个对象isArchiveValid，或者我需要另一个执行相反操作的对象？

ts类

showDialog() {
console.log(this.relatedTemplates.count);
this.isArchiveValid = this.relatedTemplates.count == 0 ? true : false;
console.log(this.isArchiveValid);
this.$modalDialogContainer.modal("show");
}

查看

<div class="row agent-form-row" *ngIf=isArchiveValid>
<div class="col-sm-10">
<div class="text-danger">
This Agent is being used by Templates and can't be archived
</div>
</div>
</div>
<button type="button" class="btn btn-primary" *ngIf=isArchiveValid  (click)="onArchiveAgent()">Archive</button>

Answer 1

只使用逻辑而非!或if/else:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

<div class="row agent-form-row" *ngIf="isArchiveValid">
<div class="col-sm-10">
<div class="text-danger">
This Agent is being used by Templates and can't be archived
</div>
</div>
</div>
<button type="button" class="btn btn-primary" *ngIf="!isArchiveValid"  (click)="onArchiveAgent()">Archive</button>

Answer 2

首先，isArchiveValid是一个变量，而不是函数。如果要在存档有效时隐藏文本，可以使用!isArchiveValid。这意味着只有当isArchiveValid为false时，错误才会显示。

Answer 3

ngIf指令有一个ngIfElse输入。要使用它，请在模板中包装else部分，并将其传递给ngIf指令的else部分，如下所示：

<div class="row agent-form-row" *ngIf="isArchiveValid; else archiveBtnTemplate">
<div class="col-sm-10">
<div class="text-danger">
This Agent is being used by Templates and can't be archived
</div>
</div>
</div>
<ng-template #archiveBtnTemplate>
<button type="button" class="btn btn-primary" *ngIf=isArchiveValid  
(click)="onArchiveAgent()">Archive</button>
</ng-template>