将函数作为条件传递给 [ngClass] - Angular 7答案

【问题标题】：Passing function as a condition inside [ngClass] - Angular 7将函数作为条件传递给 [ngClass] - Angular 7
【发布时间】：2019-05-13 14:46:08
【问题描述】：

我想在[ngClass] 条件中绑定一个函数的结果，但它根本没有做任何事情。

HTML

<div [ngClass]="{hover': check(token.ids)}" *ngFor="let tokens of info.data">

我试图从函数中返回一个布尔值，但什么也没发生，但是当我在控制台中记录它时，我会根据传递的元素收到真值或假值。

check(tokens) {
    tokens.forEach(token => {
      if (token.id === this.currentToken) {
        return true
      }
    });
  }

【问题讨论】：

试试[ngClass]="{ hover: check(token.ids) }
return true 从传递给forEach 的函数返回true，而不是check 函数。而是返回在tokens 上调用some 的结果。
What does `return` keyword mean inside `forEach` function?的可能重复
正如@HereticMonkey 所说，但您还需要检查变量名称：循环声明tokens，而您传入token。
@HereticMonkey 你能写一个小例子吗？谢谢

标签： angular

【解决方案1】：

 check(tokens) {
    let res = false;
    tokens.forEach(token => {
       if (token.id === this.currentToken) {
         res = true
       }
    });
    return res;
 }

您的检查函数没有返回值，它将返回 undefined 作为值。因此，您可以通过在函数中声明它来返回返回值的这种方式..

【讨论】：

志同道合的精神:-)

【解决方案2】：

Short circuit Array.forEach like calling break

试试这个

  check(tokens) {
      const match = false;
      tokens.forEach(token => {
        if (token.id === this.currentToken) {
          match = true
        }
      });
      return match;
   }

【讨论】：

您的代码有效，但我对您发布的 stackoverflow 链接有点困惑。您的解决方案不会短路，即使找到匹配项，它也会遍历所有令牌。最好在性能方面使用match = tokens.some(token => token.id === this.currentToken)（尽管如果令牌很少，则可以使用）。
我试图让 OP 的函数不返回任何内容，因为在 forEach 循环中的 return 实际上并没有打破循环。