Ionic 4导航后点击不开火，需要多次点击

Question

我有一个项目列表(其中40个(，这些项目加载了一个描述项目内容的页面(如照片、url链接和其他(。但问题是，我必须点击两到三次才能进入这个页面。我确实认为这个页面使用了很多html组件，所以加载需要更长的时间。

如果有人能帮助我，如果这是一个懒散的阅读或离子视图生命周期的问题。

提前谢谢！

Ionic 4项目列表：

<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start"><ion-back-button></ion-back-button></ion-buttons>
<ion-title>{{global.p.pro}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" *ngFor="let r of result">
<ion-list>
<ion-item button (click)="onPro(r);">
<ion-avatar>
<img [src]="r.icon"/>
</ion-avatar>
<ion-label>
<h2>{{r.name}}</h2>
<h3>{{r.vicinity}}</h3>
</ion-label>
<ion-button *ngIf="r.opening_hours !== undefined" slot="end" [color]="r.open" (click)="onPro(r);">{{r.opening_hours.open_now ? 'Ouvert': 'Fermé'}}</ion-button>
<ion-button *ngIf="r.opening_hours === undefined" (click)="onPro(r);"> Incertain</ion-button>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)" *ngIf="isInfinite">
<ion-infinite-scroll-content loadingSpinner="bubbles"
loadingText="Recherche en cours..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

要加载的Ionic 4页面

<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start" ><ion-back-button defaultHref="" routerLink="/listpro" routerDirection="back"></ion-back-button></ion-buttons>
<ion-title>{{elt.name}}</ion-title>
<ion-buttons slot="end">
<ion-badge *ngIf="elt.opening_hours !== undefined" [color]="elt.open">{{elt.opening_hours.open_now ? 'Ouvert': 'Fermé'}}</ion-badge>
<ion-badge *ngIf="elt.opening_hours === undefined">Incertain</ion-badge>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides>
<ion-slide>
<img src="https://picsum.photos/600/600"/>
</ion-slide>
</ion-slides>
<ion-item-divider></ion-item-divider>
<ion-button size="block" (click)="onPhone();">Contactez</ion-button>
<ion-button size="block" (click)="onAdress();">Itinéraire</ion-button>
<div *ngIf="profil.rating !== undefined">
<rating [rate]="profil.rating"
readonly="true" 
size="default">
</rating>
</div>
<div *ngIf="profil.rating === undefined" style="text-align: center;">
Aucune Note Utilisateur...
</div>
<ion-item-divider></ion-item-divider>
<h2>Horaires d'ouverture :</h2>
<div *ngIf="profil.opening_hours !== undefined"><div *ngFor="let w of profil.opening_hours.weekday_text" style="text-align: center;"> {{w}}</div></div>
<div *ngIf="profil.opening_hours === undefined" style="text-align: center;">Aucune Information...</div>
<ion-item-divider></ion-item-divider>
<div *ngIf="profil.website !== undefined"><h2>Site Web :</h2><a [href]="profil.website">{{profil.website}}</a></div>
<br/><br/><br/><br/>
</ion-content>

Answer 1

我找到了一个解决方法！我使用了一个加载布尔值，当ts中的所有内容都被加载时，它是true，所以我可以有一个带有ngIf的空html。加载完所有内容后，它将显示所有信息。谢谢大家！