Компонент Ionic 3 вызывается несколько раз и запрос выполняется неопределенно

Question

У меня есть запрос, извлекающий уникальные даты из таблицы, а затем я хочу передать каждую дату в качестве значения для запроса таблицы и отображения записей в формате HTML. Я использую компонент для достижения этой цели. Но мой запрос внутри компонента выполняется бесконечно. Ниже приведен код, который я пробовал.

report.ts

ionViewDidLoad() {
      this.sql.query("SELECT DISTINCT date FROM walkInRecord").then((data) => {
        this.dates = data.res.rows;
      });
}

report.html

<ion-content padding>
    <div *ngFor="let date of dates">
      Date: {{date.date}}
      <report-table [date]="date.date"></report-table>
    </div>
</ion-content>

Отчетно-table.ts

constructor(public sql: Mysql) {
    console.log("component");
  }
 ngAfterContentInit(){
    console.log("Component Input: ", this.date);
    this.sql.query("SELECT * FROM walkInRecord WHERE date='" + date + "'").then((data) => {
      this.records = data.res.rows;
    });
  }

Компонент правильно загружает данные. Я могу просмотреть отчет после навигации по 3 страницам и увидеть, что конструктор компонента называется трижды, что довольно дикое поведение. Кто-то, пожалуйста, дайте мне знать, что может быть причиной нескольких вызовов компонента и как остановить выполнение запроса неопределенно долго. заранее спасибо

Answer 1

Ваш компонент таблицы отчета отображается внутри *ngfor петля. Таким образом, он будет инициализирован несколько раз и ngAfterContentInit hook будет вызываться столько раз, сколько и для циклов.