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_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并使用其isEqual函数。
该函数带有两个参数。第一个是容纳设备的阵列。第二个是设备。该函数将返回一个数字，该数字是设备对象在数组中的出现。
此解决方案使用reduce

在模板中的用法：

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

Answer 2

我认为您也可以编写此代码。

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

Answer 3

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

我认为您的设备已经有了该阵列，并且正在 ngFor 中进行迭代。

我建议您采取的步骤是：

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

这样做可以解决两件事：

您将功能绑定到 * ngIf
您将解决计数问题，因为您将拥有一个包含所有带有令牌的项目的新数组。

角度计算数组中的项目总数，但不会减慢速度

3 个答案: