错误“违规'加载'处理程序花了6213ms”来自Ionic3的异步获取请求

Question

我无法尝试调试我的应用。我在我的Ionic3应用程序中设置了一个REST调用，如果列表很小，它可以很好地工作，但是在较大的列表上会出现阻塞。我正在学习这些东西，并且缺少一些基本知识来正确设置它;我已经好几天了，真的可以帮忙。

提供商/ data.ts

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class Data {

  baseUrl = 'https://soledadmemorial.com/api/v1/plaques';

  constructor(public http: HttpClient) {
    console.log('Hello ApiProvider Provider');
  }

  getItems() {
    return this.http.get(this.baseUrl)
  }
  // getItems() {
  //   // return this.http.get('https://jsonplaceholder.typicode.com/posts') // This works great
  //   // return this.http.get('https://soledadmemorial.com/api/v1/plaques') // Chokes
  //   // return this.http.get('../../assets/data/plaques.json') // This works great as a trimmed down version of the link ablve
  // }
}

噬斑list.ts

import {Component} from "@angular/core";
import {NavController} from "ionic-angular";
import {ProfilePage} from "../profile/profile";
import {Data} from "../../providers/data";

import "rxjs/add/operator/debounceTime";

@Component({
  selector: "plaque-list-page",
  templateUrl: "plaque-list.html"
})
export class PlaqueListPage {
  items: any;

  constructor(public nav: NavController, public dataService: Data) {
    this.getUsers();
  }

  getUsers() {
    this.dataService.getItems().subscribe(data => {
      this.items = data;
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }
      console.log(this.items);
    })
  }

  doInfinite(): Promise<any> {
    console.log('Begin async operation');

    return new Promise((resolve) => {
      setTimeout(() => {
        for (var i = 0; i < 30; i++) {
          this.items.push( this.items.length );
        }

        console.log('Async operation has ended');
        resolve();
      }, 500);
    })
  }

  goToFeed(items) {
    this.nav.push(ProfilePage, {item: items});
  }
}

噬斑list.html

<div class="list-mini">
  <ion-list>
    <button class="list-item" tappable ion-item (click)="goToFeed(item)" *ngFor="let item of items">
      <ion-row no-padding class="content-row one-line">
        <!-- You can limit the rows of the description by using the class one-line. If you remove it, all the content from the row will be shown -->
        <ion-col no-padding width-18 class="item-avatar">
          <preload-image class="avatar-image" [ratio]="{w:1, h:1}" [src]="item.url"></preload-image>
        </ion-col>
        <ion-col no-padding width-72 class="item-content">
          <h3 class="item-title">{{item.veteran_first}} {{item.veteran_last}} {{item.title}}</h3>
          <p class="item-description">{{item.veteran_branch}}</p>
        </ion-col>
        <ion-col no-padding width-10 class="item-icon">
          <ion-icon name="arrow-forward"></ion-icon>
        </ion-col>
      </ion-row>
    </button>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>