Angular 在不减慢速度的情况下计算数组中的项目总数

Question

目前我正在检查 checkDevice(obj) 以查看值是否存在...我还需要单独获取计数。设备在Array.

中出现了多少次

component.ts

  public checkDevice(obj) {
    if (obj == null || obj == '' || obj == '-1') {
      return false;
    } else {
      return true;
    }
  }

component.html

<div class="float-left" *ngIf="checkDevice(obj.device_token) == true">
   <i class="fa fa-icon" aria-hidden="true"></i>
</div>

编辑执行数据库查询的php脚本

$users = array();
if ($results = $dbh->runQuery($sql)) {

  foreach ($results as $key=>$row){
    $users[$row['user_id']][] = array('user_id'=>$row['user_id'],
      'user_token' => $row['utoken'],
      'device_token' => $row['device'],
      'group_name' => $row['group_name']);
  }
}

Answer 1

我觉得你也可以写这段代码

<div class="float-left" *ngIf="obj.device_toke">
   <i class="fa fa-icon" aria-hidden="true"></i>
</div>

Answer 2

我建议您不要在 HTML 中使用函数进行数据绑定，这可能会产生性能问题，因为您的函数每次都会被调用以进行检查。

我认为您的设备已经有了数组，并且您正在 ngFor 中迭代。

我推荐你的步骤是：

创建一个清除数组，您可以在其中清除所有带有标记 en null 或空的设备
使用该数组将其绑定到您的 ngFor（您将确保已加载令牌）

这样做你解决了两件事：

您将函数绑定到 *ngIf
您将解决您遇到的计数问题，因为您将拥有一个包含所有具有标记的项目的新数组。

Answer 3

如果你只是想测试对象属性是否存在，那么你应该这样做：

<div class="float-left" *ngIf="obj.device_token">
  <i class="fa fa-icon" aria-hidden="true"></i>
</div>

如果您想获取数组中设备对象的出现，请尝试以下解决方案：

getDeviceOccurrence(deviceArray: Array<object>, device: object): number {
  return deviceArray.reduce((accumulator: number, currentValue: object) => {
    if (_.isEqual(currentValue, device)) {
      return accumulator = accumulator + 1;
    }
    return accumulator;
  }, 0);
}

建议解决方案的注释：

为了比较对象，导入 lodash and use its isEqual 函数更容易。
该函数有两个参数。第一个是保存设备的数组。第二是设备。该函数将 return 一个数字，它是数组中设备对象的出现。
此解决方案使用 reduce

模板中的用法：

<span>{{ getDeviceOccurrence(devices, device) }}</span>

Angular 在不减慢速度的情况下计算数组中的项目总数

Angular count total items in array without slowing things down

angular

typescript

angular-ui-router