在组件角度SPA中加载新内容之前清空数组

Question

图片内容是从我的API加载的，但是当我点击并更改HTML数据时，在加载其他内容之前，内容仍会在页面上显示1秒钟。我尝试使用ngOnChanges（）修复它，但它似乎没有用。是否有一种聪明的方法，在单击新选项卡时立即清空数据，然后加载新数据，而用户仍然看不到旧内容（以及新内容标题）？

组件：

export class DiscoverComponent implements OnInit {

  data: any[] = [];
  stories: any;

  page: string = '0';
  feed: any;
  hits: any = '6';

  notLoaded: boolean = false;

  constructor(private storiesService: StoriesService, private route: ActivatedRoute, private router: Router) {
  }

  ngOnInit() {
    console.log(this.router);
    this.feed = this.route.snapshot.params['feed'];

    this.route.params.subscribe(
      (params: Params) => {
        this.feed = params['feed'];
      }
    );

    this.getStories();
  }

  ngOnChanges() {
    if (this.data) {
      for (let story in this.data) {
        this.data = [];
      }
      this.getStories();
    }
  }

  getStories() {
    this.storiesService.getData(this.page, this.hits, this.feed)
      .subscribe(
      (data) => {
        console.log(data);
        console.log("getStories!")
        if (!data) {
          this.notLoaded = true;
        } else {
          for (let story in data) {
            this.data = data;
          }
        }
      })
  }

  getCuratedFeed() {
    this.page = '0';
    this.hits = '6';
    this.feed = 'curated';
    this.getStories();
    console.log("Curated!")
  }

  getTrendingFeed() {
    this.page = '0';
    this.hits = '6';
    this.feed = 'trending';
    this.getStories();
    console.log("trending")
  }

  getlatestFeed() {
    this.page = '0';
    this.hits = '6';
    this.feed = 'latest';
    this.getStories();
    console.log("latest!")
  }
}

HTML：

<app-top-nav></app-top-nav>


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <li class="navbar-right"><a routerLink="/discover/curated" routerLinkActive="active" (click)="getCuratedFeed()">Curated</a></li>
    <li class="navbar-right"><a routerLink="/discover/trending" routerLinkActive="active" (click)="getTrendingFeed()">Trending</a></li>
    <li class="navbar-right"><a routerLink="/discover/latest" routerLinkActive="active" (click)="getlatestFeed()">Latest</a></li>
    <li class="navbar-right"><a routerLink="/map" routerLinkAcive="active">Map</a></li>
  </div>
</nav>

<h1>DiscoverComponent</h1>
<div>
  <h2> {{this.feed}} </h2>
</div>

<div class="row">
  <ng-container *ngIf="!notLoaded">
    <div class="col-4 col-md-4 col-sm-12" *ngFor="let story of data.hits">
      <div class="thumbnail">
        <img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" />
        <img *ngIf="story.storyMediaType === 'video'" class="img-fluid" src="{{story.storyThumbnailImage}}" width="150" height="94" />
        <div class="caption">
          <p>{{story.storyCity}}, {{story.storyCountry}}</p>
          <h3>{{story.storyHeadline}}</h3>
          <p>Uploadet {{story.uploadDate}}</p>
          <p>Bruger: {{story.userDisplayName}}</p>
          <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
  </ng-container>
</div>

<hr>

<div infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="1000" (scrolled)="onScroll()">

</div>

<div class="notification is-warning" *ngIf="finished">
  <p>Ikke mere materiale!</p>
</div>