Element destroys or gets removed from view on Nav.Ctrl.Push(Page)

[arulpatmose]

Hello Everyone!! I am currently building an Ionic Mobile Application based on wordpress rest api. I am dynamically loading posts on each categories in my view. Everything seems to be okay. But, when I navigate to the post, particular post link get destroyed itself from the view when I click back button. I couldn’t find the element in the HTML code. I am using *ngfor and *ngif with conditions. I have searched several forums but I could find a solution. Please help me to figure out the issue. Your help in this regard is highly appreciated.

Home.html

<div class="feed-grid" *ngFor="let title of Titles; let i=index">
    <ion-list no-margin padding-horizontal class="listing-title">
      <ion-item no-padding>
        <strong>{{title.title}}</strong>
        <button no-border ion-button outline item-end color="secondary" (click)="goToCategoryPosts(title.parent,title.title)">SEE
          All
        </button>
      </ion-item>
    </ion-list>
    <ion-grid no-padding>
      <ion-row>
        <ng-container *ngFor="let post of CategoryPosts; let i=index">
          <ng-container *ngIf="(post.categories[0] == title.parent || post.categories[1] == title.parent)">
            <ion-col col-6 no-padding>
              <ion-card (tap)="postTapped($event, post)">
                <div class="thumbnail">
                  <img src="{{ post.better_featured_image == null ? defaultThumb : post.better_featured_image.media_details.sizes.mobile_app_thumbs === undefined ? defaultThumb : post.better_featured_image.media_details.sizes.mobile_app_thumbs.source_url }}"
                  />
                </div>
                <ion-card-content text-uppercase no-padding>
                  <p [innerHTML]="post.title.rendered"></p>
                </ion-card-content>
                <ion-row no-padding class="card-meta-row">
                  <ion-col center class="card-meta" no-padding>
                    <ion-note text-right no-margin>
                      {{post.date | amFromUtc | amTimeAgo:true}} ago
                    </ion-note>
                  </ion-col>
                </ion-row>
              </ion-card>
            </ion-col>
          </ng-container>
        </ng-container>
      </ion-row>
    </ion-grid>
  </div>

home.ts

ionViewWillEnter() {
    this.morePagesAvailable = true;

    function compareNumbers(a, b) {
      return a - b;
    }

    setTimeout(() => {
      if (!(this.posts.length > 0)) {
        let loading = this.loadingCtrl.create({
          content: "Loading Please Wait..",
          dismissOnPageChange: true,
          spinner: 'dots'
        });

        loading.present();

        this.count = 2;

        // Load the Spot Light Posts from ITN Resource Center
        this.dataSheetId = 2;
        this.gDrive.loadversion(this.dataSheetId).subscribe((data) => {
          //console.log( 'Version', data );
          this.SpotLightId = data[1].value;
        }, (error) => {
          //console.log( error );
        });

        this.wordpressService.getRecentPosts(this.SpotLightId, this.count).subscribe(data => {
          for (let post of data) {
            post.excerpt.rendered = post.excerpt.rendered.split("<a")[0] + "</p>";
            post.iframe_src = post.content.rendered.match('(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?');
            post.cleanArticle = post.content.rendered.replace(/<(?!((?:\/\s*)?(?:br|p|table|tbody|td|tr|strong|b|u|[o|i]l|li)))([^>])+>/gi,'');
            //post.singleVideoUrl = "http://www.youtube.com/embed/"+ post.tm_video_url;
            post.categories = post.categories.sort(compareNumbers).slice(0, -1);
            post.singleVideoFile = post.tm_video_file;
            this.posts.push(post);
          }
          //loading.dismiss();
          //console.log(this.posts);
        });

        this.dataSheetId = 3;
        this.gDrive.loadshows(this.dataSheetId).subscribe(
          listdata => {
            this.Titles = listdata;
            this.count = 2;
            //console.log( 'Listing', this.Titles );

            for (let Listing of listdata) {
              // Load Posts Based on Categories
              if (!(this.CategoryPosts.length > 0)) {
                this.wordpressService.getRecentPosts(Listing.parent, this.count).subscribe(data => {
                  for (let post of data) {
                    post.excerpt.rendered = post.excerpt.rendered.split("<a")[0] + "</p>";
                    post.iframe_src = post.content.rendered.match('(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?');
                    post.cleanArticle = post.content.rendered.replace(/<(?!((?:\/\s*)?(?:br|p|table|tbody|td|tr|strong|b|u|[o|i]l|li)))([^>])+>/gi, '');
                    post.singleVideoFile = post.tm_video_file;
                    post.categories = post.categories.sort(compareNumbers);
                    this.CategoryPosts.push(post);
                  }
                  //console.log(this.CategoryPosts);
                });
              }
            }
            loading.dismiss();
          },
          error => {
            //console.log( error );
          }
        );
      }
    }, 4000);
  }