javascript - 当observable为空时，骨架文本不显示

我有一个用户列表，可以从api获取数据。因此，当然，该数据并不立即存在，因此我想用一个框架文本来指示正在加载，直到该数据实际可用为止。我实际上在搜索时已经做过同样的事情，因此在即时搜索时它会显示骨架文本。但是以某种方式，它不适用于第一个数据概念。当我打开页面时，直到有数据为止，屏幕都是白色的。

当我搜索并输入不是用户的内容时，它也起作用，直到输入有效的用户名，我都会得到一个框架文本，因此我不明白为什么它对第一个数据概念不起作用，因为列表也为空！

这是我的代码：

page.html

  <ion-list id="skeleton" *ngIf="searching || (userList | async) == 0">
    <ion-item lines="none" *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
      <ion-avatar>
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
        <ion-label text-wrap>
          <h2>
              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            </h2>
            <p>
                <ion-skeleton-text animated style="width: 40%"></ion-skeleton-text>
            </p>

        </ion-label>
    </ion-item>
  </ion-list>

  <ion-virtual-scroll [items]="(userList | async)" approxItemHeight="50px" approxItemWidth="300px" class="pad" mode="ios">

        <ion-item *virtualItem="let user; let i = index">
     <ion-avatar  class="user-image"  slot="start" >
            <ion-img src="assets/22.jpeg"> </ion-img>
     </ion-avatar>
        <ion-label text-wrap>
            <h2 class="title">{{user.username}}</h2>
          </ion-label>
      </ion-item>

  </ion-virtual-scroll>

page.ts

 public searchTerm: string = "";
  userList: Observable<any>;
  friendsList: Observable<any>;
  offset = 0;
  searching = false;
...
  ngOnInit() {
    this.getAllUsers();   // get the users
}



  getAllUsers() {
    this.searching = true;
    this.userList = this.userService.getList() // initials 12 users
    .pipe(map(response => response.results));
    this.searching = false;
  }


  filterUsers(searchTerm) {
    this.searching = true;
    this.getAllUsers();
    return this.userList.pipe(
      map(res => {
        const result = res.filter(user => {
          return user.username.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1; });
        this.searching = false;
        console.log(result);
        return result;
          })
          );
        }

  searchList() {
    this.userList = this.filterUsers(this.searchTerm);
    console.log(this.searchTerm);
  }

最佳答案

您的骨架ngIf条件期望searching等于true或async值计算为0。

您的组件将searching值初始化为false，然后调用getAllUsers()

因此，为显示骨骼，getAllUsers应将searching设置为true。

getAllUsers() {
  this.searching = true;
  //...

}

一旦async调用返回，您应该将searching设置回false

编辑

getAllUsers方法立即将this.searching设置为false。

getAllUsers() {
  this.searching = true;
  this.userList = this.userService.getList() // initials 12 users
    .pipe(map(response => response.results));
  this.searching = false;
}

改成：

getAllUsers() {
  this.searching = true;
  this.userList = this.userService.getList() // initials 12 users
    .pipe(
      map(response => response.results),
      tap(_ => this.searching = false)
    );
}