如何使用负 ngIf？答案

【问题标题】：how to use negative ngIf?如何使用负 ngIf？
【发布时间】：2020-06-19 15:46:58
【问题描述】：

如果“avenant”不存在但它不起作用，我试图显示一个 div！

*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>

【问题讨论】：

为什么不使用else，参见例如angular.io/api/common/NgIf
什么是 avenant？一个对象，一个布尔值？
如果它是布尔值，你可以使用 *ngIf="!avenant"。
它是一个对象@ukn
希望对您有所帮助，这可能会解决您的查询link

标签： angular angular-ng-if

【解决方案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>

希望对你有帮助！！

【讨论】：

【解决方案2】：

这行得通：

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

【讨论】：

这没有任何意义，数组永远不会等于空字符串

【解决方案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 指令

【讨论】：

@LamyaeLac 它的名字是ng-template 再往下看，请看我上面分享的链接。
它不起作用可能是因为 avenant 不是布尔值
<button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button> 上缺少双引号 ("deleteAvenantId(avenant.id)")