如何存储和使用 angular 管道结果在 html 文件中添加 ngClass

Question

我在做什么：

html 文件

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": someArray | inArray:result.id}'>
    </div>
    </div>

ts 文件:

someArray = [1, 2, 3]

results = [
{id:1, name:'abc'},
{id:2, name:'xyz'},
{id:4, name:'pqr'}]

结果：我从来没有被分配到class。

如何使用 "as" 将管道结果存储在 html 文件中以在 ngClass 中使用它？

inArray (pipe): Pipe returns true or false based on if value exists in array.

参考：

更新 1：

inArray (pipe): Pipe returns -1 or index value based on if value exists in array.

更新 2： stackblitz

Answer 1

您可以为此使用函数： [ngClass]="isValueInArray()" 并且 return 值 true/false 在该函数中

Answer 2

应该使用 pipes 来转换值。

尝试使用一个简单的函数来检查：

inArray(value, theArray) {
   return theArray.includes(value);
}

和模板：

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": inArray(result, results)}'>
    </div>
 </div>

甚至没有函数:

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": results.includes(result)'>
    </div>
 </div>

祝你好运！

Answer 3

您可以尝试这样的操作 - 将 class 名称绑定到属性绑定并使用您的管道

[class.myclass]='someArray | inArray:result.id'

你的管道将 return true 或 false 基于条件 class 将被添加到特定的 html

希望这对您有所帮助 - 编码愉快:)

Answer 4

如果我没记错的话，这就是您要找的！

抱歉有点事，现在才回来..

勾选StackBlitz

仅在值存在时应用 class。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'inArray' })
export class inArrayPipe implements PipeTransform {

  transform(value: any, exponent: any): boolean {
    let result = value.indexOf(exponent);
    return result > -1;
  }
}

剩下的就是你的代码了..但在上面的 Stackblitz 示例中它们都是一起工作的。

Answer 5

在我的例子中，我使用了带有输入的指令，当指令输入发生变化时，可以计算所需的样式并将其应用于指令输入。摘自此处的答案：Angular2 Styles in a Directive

如何存储和使用 angular 管道结果在 html 文件中添加 ngClass

How to store and use angular pipe result to add ngClass in html file

angular

angular-pipe