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

Posted 2021-03-30

我现在遇到了一点麻烦。我在基于* 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 }}有帖子数，我们处在一个完美的世界。但是当我尝试切换到其他段（列表）时出现问题，帖子完全从网格段和列表段中消失。

现在我知道对此的一个简单修复就是添加一个新的observable，它是posts $的完全复制品，但只是调用它像postsCount $，而async那个长度代替，但我试图理解为什么原始方法如果没有冗余代码，我还能做些什么来修复它。

答案

我认为这可能适用于您的情况：

<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打开网络选项卡，只注意一个请求，然后按照你的方式实现它，并在每次切换视图时观察发送的请求。