Ionic中如何计算*ngFor循环内duration字段的总和？

当然可以计算总和！作为Ionic新手，咱们可以从两种简单的方式入手：一种是在TS文件里提前计算（推荐，性能更好），另一种是直接在HTML模板里处理。下面给你详细拆解：

方法一：在TS组件中计算总和（推荐） #

这种方式会在数据加载完成后计算一次总和，后续只有当users数组变化时才会重新计算，性能更优。你可以用reduce方法来实现：

步骤1：在组件TS文件中添加计算逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage {
  users: any[] = []; // 存储从Django API获取的数据

  // 用getter属性动态计算总时长
  get totalDuration(): number {
    // 注意：如果duration是字符串类型，要转成数字，比如Number()
    return this.users.reduce((total, user) => {
      return total + Number(user.fields.duration);
    }, 0); // 初始值设为0
  }

  // 模拟从Django API获取数据的方法
  fetchUsersFromAPI() {
    // 这里替换成你实际的API请求代码
    // 比如用HttpClient获取数据后赋值给this.users
    this.users = [
      { fields: { date: '2024-05-01', duration: 30 } },
      { fields: { date: '2024-05-02', duration: 45 } },
      // ...更多数据
    ];
  }

  ngOnInit() {
    this.fetchUsersFromAPI(); // 页面初始化时获取数据
  }
}

步骤2：在HTML中展示总和 #

在模板里直接调用这个totalDuration属性就行：

<!-- 循环展示每个用户的数据 -->
<ion-item *ngFor="let user of users">
  <ion-row>
    <ion-col col-4> {{user.fields.date}} </ion-col>
    <ion-col col-4> {{user.fields.duration}} </ion-col>
  </ion-row>
</ion-item>

<!-- 展示总时长 -->
<ion-item>
  <ion-row>
    <ion-col col-8>总时长：</ion-col>
    <ion-col col-4> {{ totalDuration }} </ion-col>
  </ion-row>
</ion-item>

方法二：直接在HTML模板中计算（快速但不推荐大量数据） #

如果你只是快速测试，也可以直接在模板里用reduce计算，但要注意：当数据量大时，每次页面变化检测都会重新执行计算，性能会受影响。

示例代码：

<ion-item *ngFor="let user of users">
  <ion-row>
    <ion-col col-4> {{user.fields.date}} </ion-col>
    <ion-col col-4> {{user.fields.duration}} </ion-col>
  </ion-row>
</ion-item>

<!-- 直接在模板中计算总和 -->
<ion-item>
  <ion-row>
    <ion-col col-8>总时长：</ion-col>
    <ion-col col-4> 
      {{ users.reduce((sum, user) => sum + Number(user.fields.duration), 0) }} 
    </ion-col>
  </ion-row>
</ion-item>

注意事项 #

• 确保user.fields.duration是数字类型，如果是字符串（比如API返回的是字符串），一定要用Number()或parseFloat()转成数字，否则会变成字符串拼接。
• 推荐用第一种方法，尤其是数据量较多时，能避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者user8717351