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>

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

我知道我可以使用订阅方法来实现，但我想使用异步管道，每次使用订阅时我都需要取消订阅，这实际上效率不高。

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

Answer 1

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

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

没有工作。

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

1 个答案: