Angular * ng Если не повторять

Question

Я использую angular 9.

У меня есть следующее:

    <div *ngIf="!inHistory(i,j); else else_content">1</div>
    <ng-template #else_content>2</ng-template>

Это работает отлично, т.е. отображает либо 1, либо 2.

Вопрос

Как мне добавить третий положительный di c без повторного вызова функции inHistory? (а не в исходном div)

например,

    <div *ngIf="!inHistory(i,j); else else_content">1</div>
    <ng-template #else_content>2</ng-template>
    <div *ngIf="!inHistory(i,j)">3</div>

Answer 1

<div [ngSwitch]="isTrue()">
  <div *ngSwitchCase="true">1</div>
  <div *ngSwitchCase="false">2</div>
  <div *ngSwitchCase="true">3</div>
</div>

Результат: 1 3

Answer 2

Если я правильно понял ваш запрос, вам нужно отобразить независимый третий div без каких-либо условий .. верно? Если да, просто добавьте это без * ngIf ..

<div *ngIf="!inHistory(i,j); else else_content">1</div>
<ng-template #else_content>2</ng-template>
<div>3</div>

Или, если вы хотите добавить несколько блоков (successBlock в приведенном ниже примере) в блок успеха if case, просто сгруппируйте их с помощью ng-template и используйте идентификатор этого шаблона в * ngIf ..

<div *ngIf="!inHistory(i,j); then successBlock else else_content">1</div>  
<ng-template #successBlock >
  <div> </div>
  <div> </div>
  <div> </div> 
</ng-template>
<ng-template #else_content>2</ng-template>

Answer 3

Обычно рекомендуется помещать *ngif в контекстные элементы, не относящиеся к пользовательскому интерфейсу, чтобы отделить функциональные возможности от Layout. По этой причине вы должны использовать <ng-container>

 <ng-container *ngIf="!inHistory(i,j); else else_content">
  <div>1</div>
  <div>3</div>
 </ng-container>
  <ng-template #else_content>
   <div>2</div>
  </ng-template>

EDIT

Поскольку порядок важен:

<ng-container [ngSwitch]="!inHistory(i,j)">
  <div *ngSwitchCase="true">1</div>
  <div *ngSwitchCase="false">2</div>
  <div *ngSwitchCase="true">3</div>
</ng-container>

Answer 4

Положительный или отрицательный результат можно заключить в элемент ng-container. Этот элемент не будет отображаться.

<ng-container *ngIf="!inHistory(i,j); else else_content">
  <div>1</div>
  <div>3</div>
</ng-container>
<ng-template #else_content>
  <div>2</div>
</ng-template>