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挂钩将被调用多次，就像循环运行一样。

Ionic 3组件被多次调用，查询运行无限

1 个答案: