如何知道它正在使用 async 和 ngFor 加载

Posted 2023-03-10

【中文标题】如何知道它正在使用 async 和 ngFor 加载

【英文标题】：How to know it's loading with async & ngFor

【发布时间】：2019-04-25 21:54:32

【问题描述】：

我正在关注在 ngFor 指令中使用异步的 apollo 角度指南：https://www.apollographql.com/docs/angular/basics/queries.html#rxjs

我找到了检查无数据的方法：

<ng-container *ngIf="something.length; else nothing"></ng-container>

但我似乎找不到在加载数据时显示加载微调器的方法。

我试过了，但它不起作用：

*ngIf = "data | async as something; else loading"

指南中的代码：

import Component, OnInit from '@angular/core';
import Apollo from 'apollo-angular';
import Observable from 'rxjs';
import map from 'rxjs/operators';
import gql from 'graphql-tag';

const FeedQuery = gql`
  query Feed 
    currentUser 
      login
    
    feed 
      createdAt
      score
    
  
`;

@Component(
  template: `
    <ul *ngFor="let entry of data | async">
      Score: entry.score
    </ul>
  `,
)
class FeedComponent implements OnInit 
  data: Observable<any>;

  constructor(private apollo: Apollo) 

  ngOnInit() 
    this.data = this.apollo
      .watchQuery(query: FeedQuery)
      .valueChanges.pipe(map((data) => data.feed));
  

【问题讨论】：

你能不能试着把data | async放到括号里，比如(data | async) as something; else loading

实际上，在.valueChanges 发出之前，链不会发出，所以你应该使用例如初始化链。 startWith: ....valueChanges.pipe(map(...), startWith(false));

不错。它进行了一些调整，我可以使用 ngIf，我会写下解决方案。

【参考方案1】：

正如马丁在评论中提到的，解决方案是简单地用其他东西初始化链，直到它加载，所以我们可以在我们的模板中测试这个值。

显而易见的是 null。

  .valueChanges.pipe(
    map(( data ) => data.feed),
    startWith(null),
  );

然后在代码中，你可以使用一个简单的 ngIf 来检查它是否正在加载。

<h1 *ngIf="(data | async) == null">Loading</h1>

这样我们仍然可以检查是否为空（因为它将是一个空数组，而不是 null）

太棒了。谢谢。