Ionic - *ngFor 完成后的回调

Question

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

我找到了这个：但是在使用 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 似乎不支持 'ready' 或 'load'在我的 window/document

注意：有一个应用程序，我使用数组 + ngFor 来构建列表。现在，当我 remove/add 数组中的一个项目时，我的 ngFor 会更新我的列表。我希望这个 function/solution 在我的列表更新后也被调用

Answer 1

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

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

并根据您的要求编写 isItSelected() 函数 returns true 或 false，它会将此 class 添加到 ion-item

Ionic - *ngFor 完成后的回调

Ionic - callback after *ngFor finishes

angular

ionic-framework

ngfor