检查数组是否在 Angular 中有值答案

【问题标题】：Check If Array Has Value in Angular检查数组是否在 Angular 中有值
【发布时间】：2020-08-27 22:47:52
【问题描述】：

我必须检查是否有任何“cuesData”的值或长度大于 0。在下面的代码中，我只能检查第一个数组，而不能检查其他数组。

checkValues(values) {
    const result = Object.values(values).every((value) => value[1].cuesData.length > 0);
    return result;
}

HTML

<div *ngIf="checkValues(values) === true">

JSON

  [
      [
        "videoData__1",
        {
          "id": 1,
          "title": "Pale Blue Dot",
          "stoppedAt": 97.834667,
          "cuesData": [
            {
              "startTime": 25.335678,
              "endTime": 35.335678,
              "description": "fqff"
            }
          ]
        }
      ],
      [
        "videoData__2",
        {
          "id": 2,
          "title": "Big Buck Bunny",
          "stoppedAt": 247.57881,
          "cuesData": []
        }
      ],
      [
        "videoData__3",
        {
          "id": 3,
          "title": "Elephants Dream",
          "stoppedAt": 404.585327,
          "cuesData": []
        }
      ]
]

【问题讨论】：

您可以在function 或组件属性中进行检查，并从您的ngIf 中引用该属性。
你遇到的错误是什么
cuesData 是对象的属性而不是任何数组元素。*ngIf="values[0][1].cuesData.length > 0"
@ShlokNangia。它应该检查每个数组，而不仅仅是第一个数组。每个数组都有一个 cuesData 数组，所以我需要检查至少一个 cuesData 的值或长度是否大于 0
@Joseph，你的意思是这样吗？ stackblitz.com/edit/my-angular-starter-yiye8g

标签： javascript arrays angular typescript ecmascript-2016

【解决方案1】：

改变，

checkValues(values) {
    const result = Object.values(values).every((value) => value[1].cuesData.length > 0);
    return result;
}

收件人

checkValues(values){
  const result = Object.values(values).some((value) => value[1].cuesData.length > 0);
  return result;
}

工作 Stackblitz： https://stackblitz.com/edit/my-angular-starter-j4yypu

这里.every() 方法将检查所有条件是否应满足，但some() 方法工作时至少有一个条件为真..

没有提示数据长度的 Stackblitz：https://stackblitz.com/edit/my-angular-starter-cfpxa5

【讨论】：

这不是模板中的昂贵操作吗？
@Joseph，这不是模板端的操作，您只处理.ts 文件中的逻辑，所以这只是最好的方法。处理打字稿文件中的逻辑总是更好..
@Joseph，还添加了另一个示例，该示例具有另一种情况，即在任何数组中都没有任何提示数据值。希望这会有所帮助，我希望此解决方案不会导致任何性能问题。 .

【解决方案2】：

您可以为此使用一些方法：

*ngIf="CheckValues(values)"

功能：

CheckValues(values : any[]){
   return values.some(v=>v[1].cuesData&&v[1].cuesData.length); //if any array has cuesData, some will return true
}

【讨论】：

这不是模板中的昂贵操作吗？
是的，如果需要，您可以在获取数据时检查此项并为 ng if 设置任何变量
我的数据一直在变化。