如果数组为空，则显示占位符

Question

我有这个 html 代码

  <empty-list [hidden]="!emptylist" text="There is currently No User"</empty-list>
      <div *ngFor="let userObser of userObservables">
        <ion-item #emptylist *ngIf="userObser | async as user">   
            <h2>{{user.displayName}}</h2>
            <h3>{{user.email}}</h3>
        </ion-item>
      </div>

如果没有用户，我想显示空列表，如果至少有一个，我想隐藏它。

我知道我可以使用订阅方法来做到这一点，但是我想使用异步管道，而且我每次使用订阅时都需要取消订阅，这确实效率不高。

我的问题是有一种方法可以在 ntest 测试的 ion-item 内部创建一个局部变量，如果它存在于外部并因此在隐藏输入中使用它？这只是一个建议，我似乎无法让它发挥作用。

Answer 1

如果条件不匹配，您可以在ngIf 中使用简单的else 来显示另一个模板：

<ng-container *ngIf="userObservables.length > 0; else emptyList">
  <ng-container *ngFor="let user of userObservables">
    <ion-item *ngIf="user | async as user">…</ion-item>
  </ng-container>
</ng-container>

<ng-template #emptyList>
  <empty-list>…</empty-list>
</ng-template>

请注意，我还将您看似不必要的 div 替换为 ng-container 以避免不必要的 DOM 节点。

---

作为您自己建议的附注：不能从模板边界之外访问模板引用。像 *ngIf 和 *ngFor 这样的结构指令会创建自己的模板，因此这成为了一个边界。这就是为什么

<h2>{{ ref.innerText }}</h2>
<ng-container>
  <span #ref>Hello, World</span>
</ng-container>

会起作用，但是

<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
  <span #ref>Hello, World</span>
</ng-container>

不会工作。