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

现在我知道一个简单的解决方法是添加一个新的observable，它是posts $的完全复制品，但只是调用它类似postsCount $，而async就是那个长度，但我试图理解为什么原始方法不起作用，我还可以做些什么来修复它，没有冗余代码。

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 打开网络标签，只注意一个请求，然后按照您的方式实施，并在每次切换视图时观看发送的请求。

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

1 个答案: