tab3.page.html 974 B

123456789101112131415161718192021222324252627282930313233
  1. <!-- src/app/tab3/tab3.page.html -->
  2. <ion-header>
  3. <ion-toolbar>
  4. <ion-title>BMI记录</ion-title>
  5. </ion-toolbar>
  6. </ion-header>
  7. <ion-content class="ion-padding">
  8. <!-- 身高输入 -->
  9. <ion-item>
  10. <ion-label position="floating">身高 (cm)</ion-label>
  11. <ion-input type="number" (ionInput)="onHeightInput($event)"></ion-input>
  12. </ion-item>
  13. <!-- 体重输入 -->
  14. <ion-item>
  15. <ion-label position="floating">体重 (kg)</ion-label>
  16. <ion-input type="number" (ionInput)="onWeightInput($event)"></ion-input>
  17. </ion-item>
  18. <!-- 计算BMI按钮 -->
  19. <ion-button expand="full" (click)="calculateBMI()">计算BMI</ion-button>
  20. <!-- 显示BMI结果 -->
  21. <ion-card *ngIf="bmi !== null">
  22. <ion-card-header>
  23. <ion-card-title>您的BMI</ion-card-title>
  24. </ion-card-header>
  25. <ion-card-content>
  26. <p>您的BMI为{{ bmi | number:'1.1-1' }},属于‘{{ healthStatus }}’范围。</p>
  27. </ion-card-content>
  28. </ion-card>
  29. </ion-content>