NgSwitch 在交换机上丢失异步数据？

Question

我现在遇到了一点麻烦。我基于 *ngSwitch 在用户个人资料中显示帖子：

<div [ngSwitch]="iconsMediaSegment">
  <div *ngSwitchCase="'grid'">
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let post of posts$ | async" col-4 class="col-image">
          <img [src]='post.image'>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div *ngSwitchCase="'list'">
    <page-feed-item class="post-list" *ngFor="let post of posts$ | async"  [feed]="post" ></page-feed-item>
  </div>
</div>

现在，当它单独存在时，效果非常好，我可以在两个部分之间切换，没有任何问题。但我还想在视图的早期部分保留异步数据的计数器，如下所示：

  <ion-col>
    <p>Posts</p>
    <span *ngIf="posts$">{{ (posts$ | async)?.length }}</span>
  </ion-col>

现在，当页面首次加载时，第一个部分（网格）具有帖子图像，{{ (posts$ | async)?.length }} 具有帖子数量，我们处于一个完美的世界中。但是，当我尝试切换到其他段（列表）时，问题就出现了，帖子从网格段和列表段中完全消失。

现在我知道对此的一个简单解决方法是添加一个新的可观察量，它是 posts$ 的精确副本，但只需将其命名为 postsCount$ 之类的名称，然后异步该长度，但我试图理解为什么原始方法不起作用，在没有冗余代码的情况下我还能做些什么来修复它。

Answer 1

我认为这可能适合你的情况：

<ng-container *ngIf="posts$ | async as posts">

  <ion-col>
    <p>Posts</p>
    <span>{{ posts.length }}</span>
  </ion-col>

  <div [ngSwitch]="iconsMediaSegment">
    <div *ngSwitchCase="'grid'">
      <ion-grid>
        <ion-row>
          <ion-col *ngFor="let post of posts" col-4 class="col-image">
            <img [src]='post.image'>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <div *ngSwitchCase="'list'">
      <page-feed-item class="post-list" *ngFor="let post of posts"  [feed]="post" ></page-feed-item>
    </div>
  </div>
</ng-container>

请注意，与您的版本不同，每次您在视图之间切换时，此版本不会发出新请求。

您可以在这里测试它：https ://stackblitz.com/edit/angular-ykenpw 打开网络选项卡，只注意到一个请求，然后按照您的方式实现它，并在每次切换视图时观察发送的请求。