Ionic - *ngFor 完成后的回调答案

【问题标题】：Ionic - callback after *ngFor finishesIonic - *ngFor 完成后的回调
【发布时间】：2020-07-27 04:49:11
【问题描述】：

我目前正在使用 Ionic（最新）+ Angular 开发一个应用程序。我已经使用ngFor 建立了一个列表，现在我想在ngFor 完成后调用一个函数。

我发现了这个：Angular 2: Callback when ngFor has finished 然而，这在使用 ionic 时不起作用，因为它会给出关于 [ready] 不属于我的<ion-item>

的错误

我的代码：

<ion-list>
      <ion-item class="ion-no-padding" *ngFor="let exercise of exercises;"
        (click)="selectExercise($event, exercise.id)" [id]="exercise.id">
        <ion-avatar slot="start">
          <ion-img [src]="exercise.imageUrl"></ion-img>
        </ion-avatar>
        <ion-label">
          <h2>{{exercise.title}}</h2>
          <p>{{exercise.category}}</p>
        </ion-label">
      </ion-item>
</ion-list>

我的 Typescript 文件没有什么特别之处。我想做的就是能够调用一个函数，例如isReady() 在整个 ngFor 完成后或在我的 DOM 完全渲染后（尽管环顾四周后，似乎 ionic 不支持我的窗口/文档上的“就绪”或“加载”

注意：有一个应用程序，我使用数组 + ngFor 来构建列表。现在，当我从数组中删除/添加一个项目时，我的 ngFor 会更新我的列表。我希望在我的列表更新后也调用此函数/解决方案

【问题讨论】：

标签： angular ionic-framework ngfor

【解决方案1】：

你可以简单地将这行代码添加到ion-item中，

[ngClass]={ 'someClass': isItSelected(exercizes.id) }

并编写 isItSelected() 函数，根据您的要求返回 true 或 false，并将此类添加到 ion-item ?

【讨论】：

如果您有任何困难，请告诉我?
不能按我想要的方式工作。我有一个应用程序，我使用数组 + ngFor 来构建列表。现在，当我从数组中删除/添加一个项目时，我的 ngFor 会再次被调用以使我的列表与我的数组匹配。不幸的是，您的函数不会因这些更改而被调用
那你为什么不在添加/删除之后调用那个函数。此外，如果您的 html 由于某种原因没有再次呈现，请尝试 this.arrObj = [...this.arrObj];
它会再次渲染。当我这样做时 this.exercises = [...this.exercises];以确保确实如此。之后我尝试调用该函数，但它还没有获得新的 dom
好的，让我们尝试解决这个问题。如果你有 this.exercises，你能告诉我为什么需要 DOM