如何知道何时使用 *ngFor 在 DOM 中呈现项目？

Question

我正在使用 *ngFor 显示消息列表，并希望将 css 类应用于添加到集合中的项目在列表最初呈现之后。

即我不想在视图最初加载时应用该类，但仅在 messages 集合获得新项目时应用。

这个集合的来源是一个可以随时改变的服务的 observable。

<div *ngFor="let message of thread.messages">
    <div [class.fade-in-text]="threadWasLoaded">
        {{ message.text }}
    </div>
</div>

我以为我知道线程已加载后我会设置一个变量，但这没有奏效。我尝试在基本上每个 Angular 生命周期钩子中订阅 observable。

结果要么始终将 css 类应用于所有列表项，要么出现以下错误：

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。

---

this.thread$ = 
    this.storeQuery.getThreadWithMessages(this.threadId)
        .pipe(
            map(t => this.thread = new Thread(t)),
            tap(t => this.threadWasLoaded = true)
        );

我可能完全问错了问题。请让我知道我的整体方法是否偏离了基础。 :-)

编辑： 我从This Article 找到了解决我的问题的方法，它通过在页面加载时抑制子动画以不同的方式解决这个问题。

Answer 1

我知道这是通过另一种方式解决的，但对于未来的发现者来说，这是 pairwise() 运算符执行增量操作的完美用例：

  public  thread$ = this.dataService.thread$.pipe(
    startWith(null), // pairwise requires 2 emissions so we start it with a null
    pairwise(), // emit the last value and the current value in pairs
    map(([oThread, nThread]) => {
      if (oThread) { // only do this if there was a prior emission
        nThread.messages = nThread.messages.map(message => { // map the messages
          let isNew = false;
          if (!oThread.messages.find(m => m.id === message.id)) {
            // if they're not in the old array, they're new
            isNew = true;
          };
          return Object.assign({},message, {isNew});
        });
      }
      return nThread.messages;
    })
  );

闪电战：https://stackblitz.com/edit/angular-problem-preventing-animation-on-page-load-aybwz4?file=src/app/app.component.ts

Answer 2

编辑 29/7-19： https://stackblitz.com/edit/angular-ptnvro 基于 cmets 更新了 Stackblitz。 :)

我根据我的评论为您创建了一个有效的 Stackblitz 示例： https://stackblitz.com/edit/angular-nn5w2u

这里我省略了生成名字的函数，但它在Stackblitz中。 对象 = [];

  ngAfterViewInit() {
    this.fetchData();
    interval(5000).subscribe(() => this.addItem());

  }

  fetchData() {
    // creates mock data with a delay, simulating backend
    timer(2000).subscribe(() => this.objects = [{name: 'John Doe', initial: true}, {name: 'Marilyn Monroe', initial: true}])
  }

  addItem() {
    this.objects.push({name: this.generateName()});
  }

-

<ng-container *ngIf="objects.length">
<p class *ngFor="let obj of objects" [class.newItem]="!obj.initial">
  {{obj.name}}
</p>
</ng-container>

Answer 3

fade-in-text 类是动画吗？如果旧项目保留它们的fade-in-text 类，会导致问题吗？你能解决这个问题吗？

如果是这种情况，只需在所有项目上保留 fade-in-text 类。只有新项目才会获得动画。但是，如果您的 ngFor 中没有 trackBy，Angular 可能不知道一个项目是否是新的，因此它可能会删除/添加回旧项目的类，重新启动它们的淡入动画。

Answer 4

创建一个带有超时的可观察对象。

<div *ngFor="let message of thread.messages">
    <div [class.fade-in-text]="delayTrue() | async">
        {{ message.text }}
    </div>
</div>

function delayTrue() {
   return new Observable(s => setTimeout(() => (s.next(true),s.complete()));
}

删除您对threadWasLoaded 所做的所有操作，错误就会消失。