Angular中*ngIf取反用法及无Avenant时显示异常问题

我来帮你搞定这个Angular模板的问题！你遇到的核心问题是循环逻辑和空状态判断的位置错了，导致空提示永远不会被触发。

为什么原代码不生效？ #

你把*ngFor="let avenant of Avenants"和空状态的*ngIf="!avenant"放在了同一个<ng-container>里：

• 当Avenants数组为空时，*ngFor根本不会执行循环，所以里面的<ng-container *ngIf="!avenant">代码块完全不会被渲染。
• 当数组不为空时，avenant是循环里的每一项（肯定存在），所以!avenant永远为假，提示也不会显示。

修正后的代码 #

你需要把空状态判断放在循环外面，直接判断数组本身是否为空：

<!-- 先判断数组是否为空，显示提示 -->
<ng-container *ngIf="Avenants.length === 0">
  <div> no avenant found ! </div>
</ng-container>

<!-- 数组不为空时，渲染列表 -->
<ng-container *ngIf="Avenants.length > 0">
  <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)">
              <!-- 建议给按钮加个文字，比如Delete，用户体验更好 -->
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</ng-container>

额外优化说明 #

1. 移除多余的外层循环：原代码外层有一个*ngFor="let avenant of Avenants"，但里面又重新循环了排序后的数组，这完全是冗余的，直接循环排序后的数组即可。
2. 直接判断数组长度：用Avenants.length === 0比!avenant更准确，因为avenant是循环变量，数组为空时这个变量根本不存在，判断它没有意义。
3. 按钮添加文字：原按钮是空的，建议加上Delete文字，让用户知道按钮的功能。

这样修改后，当Avenants数组为空时，就会正确显示no avenant found !的提示了。

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