как использовать отрицательный ngIf?

Question

Я пытаюсь показать div, если "avenant" не существует, но он не работает!

*ngIf="avenant" работает, он показывает avenants, если они существуют, но *ngIf="!avenant" не показывает сообщение в div!

  <ng-container *ngFor="let avenant of Avenants" >
      <ng-container  *ngIf="avenant">

      <div class="panel-body border border-purple rounded stl2">
        <table class="table table-hover">
          <thead class="thead-light" >
            <tr>
              <th>id</th>
             <th> Actions</th>
            </tr>
          </thead> 
          <tbody>
            <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
              <td>{{avenant.id}}</td>
              <td>
                <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
     </ng-container>
    <ng-container *ngIf="!avenant">
      <div>
       no avenant found !
      </div>
    </ng-container>
   </ng-container>

Answer 1

Вы можете сделать следующее со своим ngIf (если вам нужно проверить наличие объектов):

*ngIf="(avenant | json) != '{}'"

<ng-container *ngFor="let avenant of Avenants" >
   <ng-container *ngIf="(avenant | json) != '{}'"> //you could do like this

      <div class="panel-body border border-purple rounded stl2">
        <table class="table table-hover">
          <thead class="thead-light" >
            <tr>
              <th>id</th>
             <th> Actions</th>
            </tr>
          </thead> 
          <tbody>
            <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
              <td>{{avenant.id}}</td>
              <td>
                <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
     </ng-container>
    <ng-container *ngIf="!avenant">
      <div>
       no avenant found !
      </div>
    </ng-container>
   </ng-container>

Надеюсь, это вам поможет !!

Answer 2

Это сработало:

 <ng-container *ngIf="(Avenants) == ''">
      <div>
        Pas d'avenants crées !
      </div>

Answer 3

Перепишите свой код

<ng-container *ngFor="let avenant of Avenants" >
  <ng-container  *ngIf="avenant; else noAvenant">

  <div class="panel-body border border-purple rounded stl2">
    <table class="table table-hover">
      <thead class="thead-light" >
        <tr>
          <th>id</th>
         <th> Actions</th>
        </tr>
      </thead> 
      <tbody>
        <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
          <td>{{avenant.id}}</td>
          <td>
            <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
 </ng-container>
<ng-template #noAvenant>
  <div>
   no avenant found !
  </div>
</ng-template>
</ng-container>

Используя директиву if-else